CSS: Columnas con Listas (UL,LI)

Escrito por Marc | Archivado en Desarrollo web, Tips | 757 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:

PLAIN TEXT
CSS:
  1. <style type="text/css">
  2. #divLista{
  3. width:400px;
  4. }
  5.  
  6. UL.col{
  7. PADDING: 0;
  8. FLOAT: left;
  9. MARGIN: 15px 0px;
  10. WIDTH: 100%;
  11. LIST-STYLE-TYPE: none
  12. }
  13.  
  14. UL.col LI{
  15. DISPLAY: inline;
  16. FLOAT: left;
  17. WIDTH: 30%;
  18. PADDING: 2px;
  19. }
  20. </style>

El código anteriormente mostrado es el que nos va a colocar en pantalla la siguiente lista en 3 columnas:

PLAIN TEXT
HTML:
  1. <div id="divLista">
  2. <ul class="col">
  3. <li>Opcion 1</li>
  4. <li>Opcion 2</li>
  5. <li>Opcion 3</li>
  6. <li>Opcion 1.1</li>
  7. <li>Opcion 2.1</li>
  8. <li>Opcion 3.1</li>
  9. </ul>
  10. </div>

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....

Tags: ,
Permalink | Comentarios (2) | Jul 30, 2008

Hay 2 comentarios para “CSS: Columnas con Listas (UL,LI)”

  1. NewSiteWorks Design » Blog Archive » CSS: Centrar nuestra web en el navegador. a dicho:
    31 Julio 2008 @ 11:41

    [...] con la línea de la última entrada vamos a mostrar un código muy sencillo para conseguir que nuestra web o el contenido que queramos [...]

  2. Manuel a dicho:
    09 Enero 2009 @ 21:38

    gracias por tu aporte de verdad me ha servido aunque no era lo q estaba buscando la idea de lo que busco es un codigo css que me sirva para crear 3 columnas q al copiar un texto en la primera columna y se salga de cierto rango de caracteres o pixeles automaticamente cambie a la segunda columna y asi sucesivamnete los agradeceria cualquier ayuda Saludos,

Participa con nosotros, publica tu comentario.