Lista que se Desborda del Div Hacia Arriba

alheranx · #1 (**permalink**) 31/03/2011, 15:57

Hola Amigos aquí con una duda.

Tengo un problema recurrente en todos mis CSS y es a la hora de crear una lista para menú dentro de un div.

El problema es que los LI se desbordan sobre el contenido del div, pero no hacia abajo, si no hacia arriba :/

Aqui el código de ejmplo:

<html>
<head>
<style type="text/css">
#menu_principal {
background: #000;
height: 30px;
}
#menu_principal li{
display: inline;
}
#menu_principal li a{
background: #0C0;
padding: 5px 10px;
}
</style>
</head>

<body>

<h1>Un titulo</h1>

<div id="menu_principal">
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>

</body>
</html>

No tiene que ver con el unicode ni nada de eso ya lo he probado.

Aqui esta la liga del ejemplo que estoy pegando:
http://ideashmedia.com/prueba.html

Lo que quiero es que se coloque dentro del div, al tope de este!
Gracias de antemano a todos por sus comentarios de ayuda!

GAST0N · #2 (**permalink**) 31/03/2011, 16:25

Estas haciendo mal esto:

Código:

#menu_principal li{
display: inline;
}

para que la lista sea horizontal debes hacer asi:

Código:

#menu_principal li{
float:left;
}

Despues para que tomen distancia entre si, podes darle un margen left..

y para mejorar el aspecto, seria mejor que quites las viñetas (los puntitos que estan al comienzo de cada li), para eso aplica la siguiente regla a ul

Código:

ul
{
list-style-type: none;
}

seguramente que cuando le des float left a los li, toda la lista se te corre mas al medio, para arreglar eso, dale margin-left, negativo al <UL>

SALUDOS... ESPERO QUE TE SIRVA

alheranx · #3 (**permalink**) 31/03/2011, 16:41

Saludos!, originalmente de hecho utilizaba float left para lograr el horizontal y me genera de hecho el mismo problema. :/

Aún así lo he intentado para ver si ahora si corria pero no, el problema persiste aún con el float: left. Alguna otra idea?

alheranx · #4 (**permalink**) 31/03/2011, 16:45

Como dato interesante es que al quitar el padding que tiene el elemento "a" deja de desbordarse, pero pues queda todo chico el boton., no seria entonces encontrar la forma de hacer el boton sin padding?

GAST0N · #5 (**permalink**) 31/03/2011, 16:50

Cita:

Iniciado por alheranx

Como dato interesante es que al quitar el padding que tiene el elemento "a" deja de desbordarse, pero pues queda todo chico el boton., no seria entonces encontrar la forma de hacer el boton sin padding?

NO ES NECESARIO QUITAR EL PADDING...... DALE MARGIN-TOP AL <LI> Y LISTO

alheranx · #6 (**permalink**) 31/03/2011, 18:23

Si le doy margin-top al LI lo que hace es separarse y no lo quiero separado si no a raz!.

De momento lo he solucionado colocando dentro de la etiqueta "a" un top igual al padding y colocando relativa la posición. Asi:

position: relative;
top: 5px;

GAST0N · #7 (**permalink**) 31/03/2011, 18:28

Cita:

Iniciado por alheranx

Si le doy margin-top al LI lo que hace es separarse y no lo quiero separado si no a raz!.

De momento lo he solucionado colocando dentro de la etiqueta "a" un top igual al padding y colocando relativa la posición. Asi:

position: relative;
top: 5px;

si pones las reglas como te dije anteriormente, y luego le das margin top, queda bien, yo mismo lo probe

alheranx · #8 (**permalink**) 31/03/2011, 18:38

oooh!! deja hago la prueba tons! =)

alheranx · #9 (**permalink**) 01/04/2011, 09:57

He realizado lo que me comentas y si funciona =).

Es muy parecido a la solución que había encontrado, pero la tuya me ahorra el position:relative que para un obsesionado de la depuracion como yo me va super bien.

La solución entonces para que quede para otros usuarios es corregir el desfase con un margin-top igual al padding que esta provocando ese desfase.

No solo tu solución es mas corta si no que ademas se aplica en el mismo bloque de css que genera el problema.