Foros del Web » Creando para Internet » CSS »

Menú rebelde

Estas en el tema de Menú rebelde en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/08/2009, 19:14
 
Fecha de Ingreso: junio-2009
Mensajes: 138
Antigüedad: 8 años, 6 meses
Puntos: 5
Menú rebelde

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ú?
  #2 (permalink)  
Antiguo 01/08/2009, 20:08
Avatar de jackbach  
Fecha de Ingreso: julio-2009
Mensajes: 36
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Menú rebelde

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!
  #3 (permalink)  
Antiguo 02/08/2009, 13:22
 
Fecha de Ingreso: agosto-2009
Mensajes: 6
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Menú rebelde

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;
}
  #4 (permalink)  
Antiguo 02/08/2009, 13:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menú rebelde

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?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 02/08/2009, 17:50
 
Fecha de Ingreso: junio-2009
Mensajes: 138
Antigüedad: 8 años, 6 meses
Puntos: 5
Respuesta: Menú rebelde

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

Saludos a todos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:39.