Foros del Web » Creando para Internet » CSS »

Lista que se Desborda del Div Hacia Arriba

Estas en el tema de Lista que se Desborda del Div Hacia Arriba en el foro de CSS en Foros del Web. 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ú ...
  #1 (permalink)  
Antiguo 31/03/2011, 15:57
 
Fecha de Ingreso: julio-2010
Mensajes: 84
Antigüedad: 14 años, 4 meses
Puntos: 7
Lista que se Desborda del Div Hacia Arriba

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!
  #2 (permalink)  
Antiguo 31/03/2011, 16:25
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 14 años, 4 meses
Puntos: 64
De acuerdo Respuesta: Lista que se Desborda del Div Hacia Arriba

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
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 31/03/2011, 16:41
 
Fecha de Ingreso: julio-2010
Mensajes: 84
Antigüedad: 14 años, 4 meses
Puntos: 7
Respuesta: Lista que se Desborda del Div Hacia Arriba

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?
  #4 (permalink)  
Antiguo 31/03/2011, 16:45
 
Fecha de Ingreso: julio-2010
Mensajes: 84
Antigüedad: 14 años, 4 meses
Puntos: 7
Respuesta: Lista que se Desborda del Div Hacia Arriba

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?
  #5 (permalink)  
Antiguo 31/03/2011, 16:50
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 14 años, 4 meses
Puntos: 64
Respuesta: Lista que se Desborda del Div Hacia Arriba

Cita:
Iniciado por alheranx Ver Mensaje
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
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #6 (permalink)  
Antiguo 31/03/2011, 18:23
 
Fecha de Ingreso: julio-2010
Mensajes: 84
Antigüedad: 14 años, 4 meses
Puntos: 7
Respuesta: Lista que se Desborda del Div Hacia Arriba

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;
  #7 (permalink)  
Antiguo 31/03/2011, 18:28
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 14 años, 4 meses
Puntos: 64
Respuesta: Lista que se Desborda del Div Hacia Arriba

Cita:
Iniciado por alheranx Ver Mensaje
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
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #8 (permalink)  
Antiguo 31/03/2011, 18:38
 
Fecha de Ingreso: julio-2010
Mensajes: 84
Antigüedad: 14 años, 4 meses
Puntos: 7
Respuesta: Lista que se Desborda del Div Hacia Arriba

oooh!! deja hago la prueba tons! =)
  #9 (permalink)  
Antiguo 01/04/2011, 09:57
 
Fecha de Ingreso: julio-2010
Mensajes: 84
Antigüedad: 14 años, 4 meses
Puntos: 7
Respuesta: Lista que se Desborda del Div Hacia Arriba

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.

Etiquetas: arriba, lista
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 21:10.