[Ovillo] Listado con elementos de listado flotantes
Hola. Esta es mi primera participación en la lista, a ver si alguien puede me aportar un poco de luz :-) Soy un poco purista del código y no me gusta nada usar hacks, aunque a veces sea irremediable. Me planteo: Si tenemos un listado (ul por ejemplo) y con todos sus elementos flotantes ¿Cómo hacer para que el listado (ul) no aparezca vacío? Es decir, para que tome la altura de los elementos contenidos. No sé si me explico, pero lo podemos ver claro en este ejemplo que he preparado: http://stanque.com/demos/css/listas.html El listado tiene fondo negro, pero el fondo no acompaña a los elementos, puesto que son flotantes y estos pierden su posición. Sé que la solución visual es muy sencilla con sobreetiquetado y algún hack, como embebiendo el listado con un div y poniendo un clearfix detrás del mismo. Como hack light se me ocurrió colocar un elemento de listado vacío al final, con clear both. Pero no funcionó. ¿A alguien se le ocurre alguna solución que no conlleve sobreetiquetado? Gracias a todos, ¡un saludo! julio loayza stanque ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Listado con elementos de listado flotantes
Julio Loayza Herrero escribió:
Me planteo: Si tenemos un listado (ul por ejemplo) y con todos sus
elementos flotantes ¿Cómo hacer para que el listado (ul) no aparezca
vacío? Es decir, para que tome la altura de los elementos contenidos.
Prueba con:
ul {
overflow:auto;
}
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Listado con elementos de listado flotantes
¡Muchas gracias a los tres! :-)
Lo solución de overflow parece bastante más lógica que la de flotar el
elemento, que la verdad no me acaba de cuadrar. Pero bueno es conocer
las dos opciones :-)
¡Un saludo!
julio loayza herrero
stanque
El 22/05/2009, a las 15:57, Hernán Beati - SaberWeb.com.ar escribió:
Julio Loayza Herrero escribió:
Me planteo: Si tenemos un listado (ul por ejemplo) y con todos sus
elementos flotantes ¿Cómo hacer para que el listado (ul) no aparezca
vacío? Es decir, para que tome la altura de los elementos
contenidos.
Prueba con:
ul {
overflow:auto;
}
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente
dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Listado con elementos de listado flotantes
Hola.
La solución de expandir floats interiores con overflow (Paul O'Brien)
es estupenda, pero hay que tener cuidado en ciertas situaciones. En
concreto, si aplicas un margen al elemento con overflow hidden (o
overflow auto) y tienes flotantes a su lado (ojo, no hablo de los
flotantes interiores), entonces el margen se calcula desde el borde
del float adyacente o no, dependiendo del navegador. En este caso, una
solución consiste en englobar el elemento con overflow dentro de otro
y aplicar el margen a este elemento padre.
Saludos.
El día 22 de mayo de 2009 18:17, Julio Loayza Herrero
loayza.lis...@stanque.com escribió:
¡Muchas gracias a los tres! :-)
Lo solución de overflow parece bastante más lógica que la de flotar el
elemento, que la verdad no me acaba de cuadrar. Pero bueno es conocer
las dos opciones :-)
¡Un saludo!
julio loayza herrero
stanque
El 22/05/2009, a las 15:57, Hernán Beati - SaberWeb.com.ar escribió:
Julio Loayza Herrero escribió:
Me planteo: Si tenemos un listado (ul por ejemplo) y con todos sus
elementos flotantes ¿Cómo hacer para que el listado (ul) no aparezca
vacío? Es decir, para que tome la altura de los elementos
contenidos.
Prueba con:
ul {
overflow:auto;
}
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente
dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
