CSS: Columnas con Listas (UL,LI)
Escrito por Marc | Archivado en Desarrollo web, Tips | 884 veces visto.
Una de las cosas que mas me gusta usar de los CSS son las listas (UL, OL) con ellas puedes listar infinidad de contenidos de la forma que desees y lo mejor de todo tabular y espaciar dichos contenidos con una facilidad enorme con un código muy simplificado.
Pero ahora no vamos ha hablar de los listados, si no de como hacer columnas con textos utilizando listas.
Con las listas podemos crear columnas, utilizando los porcentajes (%) el Float:left o right y el Display:inline...
El siguiente código lo hemos de insertar en el HEAD:
-
<style type="text/css">
-
#divLista{
-
width:400px;
-
}
-
-
UL.col{
-
PADDING: 0;
-
FLOAT: left;
-
MARGIN: 15px 0px;
-
WIDTH: 100%;
-
LIST-STYLE-TYPE: none
-
}
-
-
UL.col LI{
-
DISPLAY: inline;
-
FLOAT: left;
-
WIDTH: 30%;
-
PADDING: 2px;
-
}
-
</style>
El código anteriormente mostrado es el que nos va a colocar en pantalla la siguiente lista en 3 columnas:
En el código CSS anteriormente mostrado podemos variar la anchura de las columnas con tan solo modificar el WIDTH del elemento LI, y como no, la separación entre columnas también la podemos modificar utilizando la propiedad PADDING del mismo elemento LI. Así que podemos formatear las listas para generar 1, 2, 3...N columnas con nuestro contenido.
Es una opción muy buena, ya que nos ahorramos unas cuantas capas y de esta forma, si enlazamos esta maquetación con una programación en PHP podemos generar unos listados de contenidos realmente sencillos y con muy poco código.
Cabe apuntar también que el texto de dentro de los LI también se puede cambiar por imagenes, vamos que podemos generar columnas con imagenes del mismo modo con el que lo hacemos con textos.
Ahora solo queda que lo probéis y nos comentais el que....
