Menú rebelde

[Reverberante]

Siguiendo con mis trasteos estoy probando un código css que falla en un punto: la barra de navegación horizontal se distorsiona. El código en cuestión es éste:

<style type="text/css">

* {
margin: 0;
padding: 0;
border: 0;
position: relative;
}

body {
background: white;/* center navcontainer in IE5 */
margin-top: 60px;
margin-bottom: 40px;
}




#contenido {
width: 740px;
position: relative;
background: white;
margin: 0 auto;
}

h3 {
font-size: 16px;
font-weight: bold;
font-family: Arial;
color: Navy;
text-align:
justify;
text-indent: 1cm;
}



#auxiliar {
width: 900px;
background: white;
position: relative;
top: 70px;
left: 0;
text-align: center;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 45px;
margin-bottom: 30px;
}



#navcontainer {
margin: 0 auto;
padding-left: 25px;
text-align: center;
}

#navlist {
width: 100%;
padding: 1px 1px 1px;
font: bold 12px Verdana, sans-serif;
}

#navlist li {
list-style: none;
margin: 0 auto;
border-top: 1px solid gray;
display: inline;
}

#navlist li a {
padding: 0.25em 0.5em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
width: 150px;
display: inline;
float: left;
}

#navlist li a:link {
color: #448;
}

#navlist li a:visited {
color: #667;
}

#navlist li a:hover {
border-color: #FF0000;
color: #FFF;
background: #332;
}

</style>



Y la distorsión que comento se puede ver en www.iluminigoj.idomyweb.com

¿Alguien sabe cómo corregir ese fallo en el menú?

[jackbach]

te refieres al menu de abajo? A que hace un salto de línea?

Si es así sugiero que modifiques el padding de #navlist li a

Hasta pronto!

[zendcode]

vi todo tu codigo y hay muchas cosas que debes mejorar y otras que no entiendo por ejemplo el background-color:white por defecto siempre es blanco, otra para centrar en ie5 es body {text-align:center;} luego para arreglar la alineacion en el container principal le poens de nuevo text-align:left; y otra cosa mas no se por que declaras al principio a todos (*) los elementos relative; hum.. deberias usar floats y yo creo que con 3 divs es mas que suficiente tu diseño y solo jugando con margin y float no necesitas position absolute

saludos, si no me ekivoko haceindo esto tu menu estara en linea solo cambia la parte que esta en rojo

#navlist li a {
padding: 0.25em 0.5em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
width: 120px;
display: inline;
float: left;
}

[kseso?]

Prueba a hacer estos cambios:
#navcontainer {margin:0 auto; padding-left:25px; position:relative; width:680px;}
#navlist li suprime 'display: inline' y dale 'float:left'
#navlist li a quita el float y añade 'display:block', suprime el width y controla su tamaño que el padding.

ie5? Ya es bastante con el 6, ¿no te parece?

[Reverberante]

Gracias por vuestras respuestas, voy a probarlas y os contaré cómo me fue.

Saludos a todos