menu dentro de un div

edisondsg · #1 (**permalink**) 29/04/2010, 21:44

Tengo un problema cuando agrego un menu como lista en el div.
Al poner la lista este div se separa del que esta arriba que se llama encabezado, si saco la lista se juntan nuevamente.

Les paso el código para ver si me pueden ayudar:
HTML:

<div id="menu">
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="empresa.html">Empresa</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="clientes.html">Clientes</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</div>

CSS

#menu{
height:50px;
background-color:#DDDCDE;
}

#menu li{
list-style-type:none;
float:left;
margin-left:40px;
margin-right:40px;
text-align:center;
padding-top:15px;
}

Espero me puedan ayudar y de antemano les agradezco mucho.
Saludos!!!

tonydelpinogz · #2 (**permalink**) 30/04/2010, 17:06

encabezado es otra capa que esta arriba de la capa menu no?
puede ser porque tienes esto "padding-top:15px;" ?...

edisondsg · #3 (**permalink**) 30/04/2010, 17:12

Si, exactamente, encabezado es otra capa que está arriba de menú. He probado sacarle el padding pero igualmente quedan separadas las capas. En IE se ven juntas pero en Opera y Firefox se ven separadas.

tonydelpinogz · #4 (**permalink**) 30/04/2010, 17:20

pon el código css y htm donde aparece encabezado y menu .

edisondsg · #5 (**permalink**) 01/05/2010, 09:03

Ahi va!

HTML

<body>
<div id="cabecera"><img src="logo2.gif" /></div>
<div id="menu">
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="empresa.html">Empresa</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="clientes.html">Clientes</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</div>

CSS

#cabecera, #menu, #cuerpo, #pie {
width:900px;
margin:auto;

}
#cabecera{
height:110px;
background-color:#C6FFFF;

}
#menu{
height:50px;
background-color:#DDDCDE;
}

#menu li{
list-style-type:none;
float:left;
margin-left:40px;
margin-right:40px;
text-align:center;
/*padding-top:15px;*/
}

anfergon · #6 (**permalink**) 03/05/2010, 14:01

Hola:

La respuesta es sencilla. Las listas (ul y ol) tienen un padding predeterminado, el cual debe ser llevado a cero para que la capa del menú no "baje".

Para ello debes colocar en el css lo siguiente:

#menu ul {
padding: 0;
margin: 0;
}

Y ya está pronto.
Saludos

edisondsg · #7 (**permalink**) 05/05/2010, 20:25

Hola! Si, el lunes fuí al curso y le comente al profe y me dijo que era ese el problema, asi que solucionado!!
Muchas gracias a los dos por ayudarme! Perdón que no respondi antes pero estaba a full con la facu.
Se que en este foro no se puede ya que es otro tema pero ahora me queda consultar y pedir consejos sobre hosting ya que es mi primer página.
Un saludo!!