Foros del Web » Creando para Internet » CSS »

Ayuda con menu css

Estas en el tema de Ayuda con menu css en el foro de CSS en Foros del Web. Saludos, estoy haciendo un pequeño sitio y me he topado con un problemilla al comenzar a hacer el menu (horizontal). El asunto es que cuando ...
  #1 (permalink)  
Antiguo 03/02/2011, 14:30
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 21 años, 7 meses
Puntos: 3
Busqueda Ayuda con menu css

Saludos, estoy haciendo un pequeño sitio y me he topado con un problemilla al comenzar a hacer el menu (horizontal).

El asunto es que cuando le coloco la propiedad float: left a los elementos <li> del menu me desparece el div contenedor donde este se encuentra, descuadranadome el diseño y moviendo otros div que no deberian moverse...

Para mejor entendimiento

Acá dejo el código HTML:

<div id="todo">
<div id="superior">
<div id="header"></div>
</div>

<!--Comienzo Menú-->

<div id="menu">
<ul id="nav">
<li>Calendario</li>
<li>Rankin Nacional</li>
<li>Fotos</li>
<li>Videos</li>
<li>Contactenos</li>
</ul>
</div>
<!--Fin MEnu-->

<div id="izq">Izquierdo</div>
<div id="centro">Centro</div>
<div id="derecho">
<div id="encabezados">Redes Sociales</div>
<div id="logos"><img src="imagenes/social/facebook.jpg" alt="Facebook" /> <img src="imagenes/social/twitter.jpg" /></div></div>

</div>
</body>
</html>

Codigo CSS:

#todo {
margin: 0 auto 0 auto;
text-align:center;
width:900px;
border:#999999 solid 1px;
height:600px}

#header {
width: 100%;
height:100px;
background-image:url(imagenes/header-crbel.png) }



#menu { background-color:#0066FF; margin: 10px 0px 10px 0px;}

#nav { list-style:none; margin: 0; padding:0; }

#nav li { margin: 2px; padding: 0; float:left }

#izq { width:50%; background-color:#333333; float:left; }

#centro { width:20%; background-color:#666666; float:left; margin: 0px 5% 0px 5%}

#derecho {width:20%; background-color:#999999; float:left; }

#encabezados {width:100%; background-color:#FFFFFF; margin: 10px 0px 10px 0px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px}

#textoderecho {float: left}



Gracias de antemano por la ayuda suministrada
  #2 (permalink)  
Antiguo 03/02/2011, 15:16
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 2 meses
Puntos: 36
Respuesta: Ayuda con menu css

añade la propiedad clear:both; dentro de la declaración #izq { }.
  #3 (permalink)  
Antiguo 03/02/2011, 15:27
 
Fecha de Ingreso: abril-2010
Ubicación: Bogotá
Mensajes: 15
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Ayuda con menu css

Colocale un height y un widht al div contenedor del menú, por lo general cuando no tienen estas propiedades los navegadores los ignoran, tambien te recomiendo la extensión firebug para que puedas ver como leé tú codigo el navegador.

Espero te sirva, Saludos...
  #4 (permalink)  
Antiguo 03/02/2011, 15:36
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 21 años, 7 meses
Puntos: 3
Respuesta: Ayuda con menu css

Gracias, lo habia probado pero poniendolo en otro div....Y al div que se desaparecia lo coloque height y listo..

Muy amable de tu parte..


Suerte!!!
  #5 (permalink)  
Antiguo 03/02/2011, 15:44
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Ayuda con menu css

ahorita ya lo hiciste con un clear:both y quedo perfecto hasta donde entendí

solo como referencia en algunos casos no es muy viable o limpio utilizar un la propiedad clear:both y en tu caso del menú también se podía solventar cono un overflow:hidden sobre la id menu
  #6 (permalink)  
Antiguo 03/02/2011, 16:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Ayuda con menu css

Cita:
Iniciado por Ag666 Ver Mensaje
ahorita ya lo hiciste con un clear:both y quedo perfecto hasta donde entendí

solo como referencia en algunos casos no es muy viable o limpio utilizar un la propiedad clear:both y en tu caso del menú también se podía solventar con un overflow:hidden sobre la id menu
+1
Estamos ante el típico efecto de los elementos flotados que no hace crecer a su contenedor.

Etiquetas: Ninguno
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 10:24.