Entrar

las margenes del meno lateral se desordenaron

SANDRA PAOLA GONZALEZ · · Solicitar retirada
Hola, estoy tratando de hacer mi pagina web, ya tenia una pagina principal pero la cambie, tengo un problema, cambie en el menu principal en los enlaces las letras por dibujos, es decir se da click a una imagen y aparece la informacion del tema, pero me daño los bordes del menu, antes con las letras salia bien, pero ahora se me daño pongo mi index html haber si alguine me puede ayudar estoy enredada a y mi pagina es
http://mundomicroscopico.scienceontheweb.net/index.html#

ahora si mi index html es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>pagina principal Mundo Microscopico</title>
<link rel="stylesheet"href="estilos.css"type="text/css"media="all">
</head>
<body>
<script>
// numero de copos de nieve (maximo 35)
var snowmax=6
// colores para la nieve. puedes poner varios
var snowcolor=new Array("#FFFFFF","#FF4500","#CAFF70")
// fuente para los copos de nieve. puedes poner varios
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
// coloca la letra que hara de copo, normalmente un asterisco *
var snowletter="MUNDO MICROSCOPICO"
// velocidad de la nieve. se recomienda entre 0.2 a 2
var sinkspeed=0.3
// tamaño maximo para los copos de nieve
var snowmaxsize=13
// tamaño minimo para los copos de nieve
var snowminsize=8
// Aqui selecciona el modo de nive. pon 1 para que la nieve caiga por todos lados
// 2 para que venga de la izquierda, 3 desde la derecha y 4 desde arriba.
var snowingzone=3
// lo siguiente no se debe variar
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
crds = 0;
lftrght = Math.random()*15;
x_mv = 0.03 + Math.random()/10;
snow=document.getElementById("s"+i)
snow.style.fontFamily=snowtype[randommaker(snowtype.length)]
snow.size=randommaker(snowsizerange)+snowminsize
snow.style.fontSize=snow.size
snow.style.color=snowcolor[randommaker(snowcolor.length)]
snow.sink=sinkspeed*snow.size/5
if (snowingzone==1) {snow.posx=randommaker(marginright-snow.size)}
if (snowingzone==2) {snow.posx=randommaker(marginright/2-snow.size)}
if (snowingzone==3) {snow.posx=randommaker(marginright/2-snow.size)+marginright/4}
if (snowingzone==4) {snow.posx=randommaker(marginright/2-snow.size)+marginright/2}
snow.posy=randommaker(2*marginbottom-marginbottom-2*snow.size)
snow.style.left=snow.posx
snow.style.top=snow.posy
}
movesnow()
}
function movesnow() {
for (i=0;i<=snowmax;i++) {
crds += x_mv;
snow.posy+=snow.sink
snow.style.left=snow.posx+lftrght*Math.sin(crds);
snow.style.top=snow.posy
if (snow.posy>=marginbottom-2*snow.size || parseInt(snow.style.left)>(marginright-3*lftrght)){
if (snowingzone==1) {snow.posx=randommaker(marginright-snow.size)}
if (snowingzone==2) {snow.posx=randommaker(marginright/2-snow.size)}
if (snowingzone==3) {snow.posx=randommaker(marginright/2-snow.size)+marginright/4}
if (snowingzone==4) {snow.posx=randommaker(marginright/2-snow.size)+marginright/2}
snow.posy=0
}
}
var timer=setTimeout("movesnow()",50)
}
for (i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
window.onload=initsnow
}
</script>


<div id="global">
<div id="curva-superior"></div>
<div id="menu">
<ul>
<h1>MUNDO MICROSCOPICO</h1>
  • Introduccion a la Bacteriologia
  • [contenido no disponible]
  • [contenido no disponible]
  • <a href="#">[contenido no disponible]
  • [contenido no disponible]
  • [contenido no disponible]
  • [contenido no disponible]</lu>
    </div>
    <h1>Amigos Bacteriologos:</h1>
    <div id="contenido">
    <p class="justificado">

    Esta página es para ustedes, aquí pueden exponer sus inquietudes, dar ideas y por que no publicar sus monografías o artículos, para que otros puedan observarlos.
    • </p>


    <a href="mailto:[correo eliminado]">[contenido no disponible]</p>
    <div id="curva-inferior"></div>
    </body>
    </html>
    PAOLA GONZALEZ
    manmanu · · Solicitar retirada
    Hola SANDRA,
    aquí debajo de dejo tú código corregido.
    Tenias muchos errores,me ha llevado un ratito arreglartelo.
    Si antes tenias bién tú página y te funcionaba, has hecho cambios a peor.
    El script qué has colocado"Mundo microscopico", por alguna razón qué desconozco, solo te funciona con internet explorer,deberia funcionarte con Opera.
    Bueno copia y pega éste cambio, y te funcionara, a no ser que hayas dañado tu CSS.

    Pero una cosa muy importante, compara el qué tú colocaste, y el qué yo te dejo,encontraras los errores, qué son varios y podras aprender algo nuevo.
    No te olvides de repasar,por qué si no, ésto no tiene sentido.
    Comenta si has visto parte o todos los cambios, te llevará un rato, pero asi se aprende.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>pagina principal Mundo Microscopico</title>
<link rel="stylesheet"href="estilos.css"type="text/css"media="all">
</head>
<body>
<script type="text/livescript">
// numero de copos de nieve (maximo 35)
var snowmax=6
// colores para la nieve. puedes poner varios
var snowcolor=new Array("#FFFFFF","#FF4500","#CAFF70")
// fuente para los copos de nieve. puedes poner varios
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
// coloca la letra que hara de copo, normalmente un asterisco *
var snowletter="MUNDO MICROSCOPICO"
// velocidad de la nieve. se recomienda entre 0.2 a 2
var sinkspeed=0.3
// tamaño maximo para los copos de nieve
var snowmaxsize=13
// tamaño minimo para los copos de nieve
var snowminsize=8
// Aqui selecciona el modo de nive. pon 1 para que la nieve caiga por todos lados
// 2 para que venga de la izquierda, 3 desde la derecha y 4 desde arriba.
var snowingzone=3
// lo siguiente no se debe variar
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=document.getElementById("s"+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.fontSize=snow[i].size
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].sink=sinkspeed*snow[i].size/5
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
snow[i].style.left=snow[i].posx
snow[i].style.top=snow[i].posy
}
movesnow()
}
function movesnow() {
for (i=0;i<=snowmax;i++) {
crds[i] += x_mv[i];
snow[i].posy+=snow[i].sink
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
snow[i].style.top=snow[i].posy
if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=0
}
}
var timer=setTimeout("movesnow()",50)
}
for (i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
window.onload=initsnow
}
</script>


<div id="global">
<div id="curva-superior"></div>
<div id="menu">
<h1>MUNDO MICROSCOPICO</h1>
<ul>

[*][url="plantilla.html"]Introduccion a la Bacteriologia[/url][*][url="plantilla3.html"][img]objetos/bacteriologia%20a%203%20x%204.jpg[/img][/url][*][url="#"][img]objetos/parsitologia%203%20x%204%20a.jpg[/img][/url][*][url="#"][img]objetos/3%20x%204%20a.jpg[/img][/url][*][url="#"][img]objetos/3%20x%204%20uroanalisis%20a.jpg[/img][/url][*][url="#"][img]objetos/hematologia%20a%203%20x%204.jpg[/img][/url][*][url="#"][img]objetos/genetica%203%20x%204%20a.jpg[/img][/url]

[/list]
</div>
<h1>[i]Amigos Bacteriologos:[/i]</h1>
<div id="contenido">
<p class="justificado">[b][i]Esta p&aacute;gina es para ustedes, aqu&iacute; pueden exponer sus inquietudes, dar ideas y por que no publicar sus monograf&iacute;as o art&iacute;culos, para que otros puedan observarlos.[/i][/b]</p>


[email="[correo eliminado]"]escribeme y juntos mejoraremos nuestra pagina[img]objetos/bichos006.gif[/img][/email]</p>
<div id="curva-inferior"></div>
</div>
</div>
</body>
</html>

    Saludos manmanu
    SANDRA PAOLA GONZALEZ · · Solicitar retirada
    voy a intentarlo esta tarde y te avizo, gracias por la ayuda y es que la verdad no tengo mucho tiempo para mi pagina pues yo soy bacteriologa y trabajo desde las 7:30 hasta las 5 pm entonces, si es lento mi proceso, pero gracias por corregirme
    PAOLA GONZALEZ
    SANDRA PAOLA GONZALEZ · · Solicitar retirada
    ya copie y pege la hoja que hiciste de index, pero lo unico que veo de diferencia es que el vinculo de el mail lo pusiste en negro y pues no se ve por que de ese color tengo el fondo, asi se ve en internet explorer y yo no tengo el vinculo para el mail en ese letrero lo tengo para la culebrita, pero la pregunta es por que las margenes del menu lateral quedaron fragmentadas es decir no se ve entero, y con el codigo que me envias no se corrige Gracias por la ayuda aqui esta mi index :
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>pagina principal Mundo Microscopico</title>
    <link rel="stylesheet"href="estilos.css"type="text/css"media="all">
    </head>
    <body>
    <script>
    // numero de copos de nieve (maximo 35)
    var snowmax=6
    // colores para la nieve. puedes poner varios
    var snowcolor=new Array("#FFFFFF","#FF4500","#CAFF70")
    // fuente para los copos de nieve. puedes poner varios
    var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
    // coloca la letra que hara de copo, normalmente un asterisco *
    var snowletter="MUNDO MICROSCOPICO"
    // velocidad de la nieve. se recomienda entre 0.2 a 2
    var sinkspeed=0.3
    // tamaño maximo para los copos de nieve
    var snowmaxsize=13
    // tamaño minimo para los copos de nieve
    var snowminsize=8
    // Aqui selecciona el modo de nive. pon 1 para que la nieve caiga por todos lados
    // 2 para que venga de la izquierda, 3 desde la derecha y 4 desde arriba.
    var snowingzone=3
    // lo siguiente no se debe variar
    var snow=new Array()
    var marginbottom
    var marginright
    var timer
    var i_snow=0
    var x_mv=new Array();
    var crds=new Array();
    var lftrght=new Array();
    var browserinfos=navigator.userAgent
    var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
    var ns6=document.getElementById&&!document.all
    var opera=browserinfos.match(/Opera/)
    var browserok=ie5||ns6||opera
    function randommaker(range) {
    rand=Math.floor(range*Math.random())
    return rand
    }
    function initsnow() {
    if (ie5 || opera) {
    marginbottom = document.body.clientHeight
    marginright = document.body.clientWidth
    }
    else if (ns6) {
    marginbottom = window.innerHeight
    marginright = window.innerWidth
    }
    var snowsizerange=snowmaxsize-snowminsize
    for (i=0;i<=snowmax;i++) {
    crds = 0;
    lftrght = Math.random()*15;
    x_mv = 0.03 + Math.random()/10;
    snow=document.getElementById("s"+i)
    snow.style.fontFamily=snowtype[randommaker(snowtype.length)]
    snow.size=randommaker(snowsizerange)+snowminsize
    snow.style.fontSize=snow.size
    snow.style.color=snowcolor[randommaker(snowcolor.length)]
    snow.sink=sinkspeed*snow.size/5
    if (snowingzone==1) {snow.posx=randommaker(marginright-snow.size)}
    if (snowingzone==2) {snow.posx=randommaker(marginright/2-snow.size)}
    if (snowingzone==3) {snow.posx=randommaker(marginright/2-snow.size)+marginright/4}
    if (snowingzone==4) {snow.posx=randommaker(marginright/2-snow.size)+marginright/2}
    snow.posy=randommaker(2*marginbottom-marginbottom-2*snow.size)
    snow.style.left=snow.posx
    snow.style.top=snow.posy
    }
    movesnow()
    }
    function movesnow() {
    for (i=0;i<=snowmax;i++) {
    crds += x_mv;
    snow.posy+=snow.sink
    snow.style.left=snow.posx+lftrght*Math.sin(crds);
    snow.style.top=snow.posy
    if (snow.posy>=marginbottom-2*snow.size || parseInt(snow.style.left)>(marginright-3*lftrght)){
    if (snowingzone==1) {snow.posx=randommaker(marginright-snow.size)}
    if (snowingzone==2) {snow.posx=randommaker(marginright/2-snow.size)}
    if (snowingzone==3) {snow.posx=randommaker(marginright/2-snow.size)+marginright/4}
    if (snowingzone==4) {snow.posx=randommaker(marginright/2-snow.size)+marginright/2}
    snow.posy=0
    }
    }
    var timer=setTimeout("movesnow()",50)
    }
    for (i=0;i<=snowmax;i++) {
    document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
    }
    if (browserok) {
    window.onload=initsnow
    }
    </script>


    <div id="global">
    <div id="curva-superior"></div>
    <div id="menu">
    <ul>
    <h1>MUNDO MICROSCOPICO</h1>
  • Introduccion a la Bacteriologia
  • [contenido no disponible]
  • [contenido no disponible]
  • <a href="#">[contenido no disponible]
  • [contenido no disponible]
  • [contenido no disponible]
  • [contenido no disponible]</lu>
    </div>
    <h1>Amigos Bacteriologos:</h1>
    <div id="contenido">
    <p class="justificado">

    Esta página es para ustedes, aquí pueden exponer sus inquietudes, dar ideas y por que no publicar sus monografías o artículos, para que otros puedan observarlos.
    • </p>


    <a href="mailto:[correo eliminado]">[contenido no disponible]</p>
    <div id="curva-inferior"></div>
    </body>
    </html>
    y aqui esta mi hoja de estilos css
    *{margin:0px;padding:0px;border:0px}
    #global{width:800px;margin:4px auto}
    body{background-color:#1C1C1C}
    #curva-superior{background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden}
    img{border-style:none}
    #contenido p{padding: 10px 10px 10px 10px}
    .centrado{text-align:center}
    .justificado{text-align:justify}
    h1{font-size:2.0em;color:white;font-weight:bold;text-decoration:underline;text-align:center}
    h2{font-size:1.8em;color: #FF4500 ;font-weight:bold;text-decoration:none;text-aling:center}
    p{font-size:20;color:white}
    #menu{width:150px;float:left;text-align:left;margin: 3px 10px 3px 3px ;background-image:url(objetos/menu-parte-inferior.gif);background-position:bottom;padding-bottom:5px}
    #menu h1{font-size:1.2;color:black;font-weight:bold;text-decoration:underline;text-aling:center}
    #menu h1{text-decoration:none;font-size:12px;background-image:url(objetos/menu-parte-superior.gif)}
    #menu li{list-style:none;margin:6px 8px 4px 6px}
    #menu l1{text-decoration:none}
    #curva-inferior{background-image:url(objetos/curva-inferior.gif);background-repeat:no-repeat;width:800px;heigth:12px;overflow:hidden}
    a{color:black;text-decoration:none;display:block}
    a:link{}
    a:visited{}
    a:hover{color:#00FF00;text-decoration:underline}
    PAOLA GONZALEZ
    manmanu · · Solicitar retirada
    Hola sandra,
    te pego aquí el CSS corregido;
    *{margin:0px;padding:0px;border:0px}
#global{width:800px;margin:4px auto;}
body{background-color:#1C1C1C;text-align: center ;height:100% }
#curva-superior{background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden}
img{border-style:none}
#contenido p{padding: 10px 10px 10px 10px}
.centrado{text-align:center}
.justificado{text-align:justify}
h1{font-size:2.0em;color:white;font-weight:bold;text-decoration:underline;text-align:center}
h2{font-size:1.8em;color: #FF4500 ;font-weight:bold;text-decoration:none;text-align:center}
p{font-size:20px;color:white}
#menu{width:150px;float:left;text-align:left;margin: 3px 10px 3px 3px ;background-image:url(objetos/menu-parte-inferior.gif);background-position:bottom;padding-bottom:5px}
#menu h1{font-size:1.2em;color:black;font-weight:bold;text-decoration:underline;text-align:center}
#menu h1{text-decoration:none;font-size:12px;background-image:url(objetos/menu-parte-superior.gif)}
#menu li{list-style:none;margin:6px 8px 4px 6px}
#menu l1{text-decoration:none}
#curva-inferior{background-image:url(objetos/curva-inferior.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden;}
a{color:black;text-decoration:none;display:block}
a:link{}
a:visited{}
a:hover{color:#00FF00;text-decoration:underline}
    Voy a ser sincero, yo creo que te ayudo diciendote qué la primera página la arregles desde "0", con todo el material qué tienes, o por lo menos vuelvas a estructurar todo el código,por qué tiene errores de composición.
    Me explico, para la página qué útilizas en plantilla.html mantienes un orden, pero en la que has incluido aquí no.
    Te he corregido algunos errores en el CSS, pienso qué debes revisar la página qué has mostrado, y si tienes tiempo vuelvas amirar el curso paso a paso.
    Tienes arreglos qué hacer,posiblemente al incluir éste nuevo CSS, mejore un poco el posicionamiento, tu decides sobre el html qué pusiste en los dos post, o el que corregi.

    Tienes en el html, contenido cortado, en <div> no se como estaba, o como lo quieres.
    Repasalo, y corrigelo, no es complicado.

    !!!!Animo!!!!


    Saludos manmanu
    SANDRA PAOLA GONZALEZ · · Solicitar retirada
    Muchas gracias por tu ayuda, se ve mejor centrado, el texto, pero sigo sin poder corregir lo que me parece mas importante y es que en el menu lateral, como puse imagenes para entrar a los diferentes temas, en lugar de texto, que antes quedaba bien entre las margenes, ahora no aparece cortada la margen por la mitad y en el lado de ariiba y ya lo he vuelta a hacer pero no encuentro el error, ya me enrede y no doy con el chiste, sera que alguien sabe que estoy haciendo mal por favorrrrrrrrrrrrrr ya me desespere y es que aveces no cuento con mucho tiempo :oops: :oops: :oops: :oops: