Listas en CSS

Así como es importante el marcado correcto de párrafos y encabezados, las listas también deben estar especificadas de la forma adecuada.

Más allá de la marcación del documento HTML, con la ayuda de CSS es posible cambiar por completo la apariencia de las listas y crear elementos atractivos y de gran impacto visual, tanto para un simple listado como para la creación de una barra de navegación.

El marcado de las listas

En HTML la manera correcta de presentar una lista con ítems es utilizando las etiquetas UL y OL. La sigla UL proviene de Unordered List (listas sin orden) y OL de Ordered list (listas ordenadas). Al utilizar estas etiquetas en un documento HTML el navegador se encarga de colocar viñetas (cuando se usa UL) o numerar los ítems (al usar OL):

Ejemplo:

Para lograr las listas anteriores el código HTML utilizado es:

Lista con UL:

<ul>
	<li>Argentina</li>
	<li>Brasil</li>
	<li>Uruguay</li>
	<li>Paraguay</li>
</ul>

Lista con OL:

<ol>
	<li>Argentina</li>
	<li>Brasil</li>
	<li>Uruguay</li>
	<li>Paraguay</li>
</ol>

Otro tipo de listas son las generadas por DL (Definition list) donde intervienen dos elementos: término y definición del término.

Ejemplo:

El código HTML para la lista anterior es:

<dl>
	<dt>Asteroides:</dt>
	<dd>Son una serie de objetos rocosos o metálicos que orbitan alrededor del Sol.</dd>
	<dt>Cometas:</dt>
	<dd>cuerpos frágiles y pequeños, de forma irregular, formados por una mezcla de substancias duras y gases congelados.</dd>
	<dt>Planetas:</dt>
</dl>

Dando formato a las listas:

1) Cambiando el estilo:

Utilizando CSS es posible dar formato a las listas sin modificar el código HTML (ese precisamente es el chiste de las hojas de estilo). Por ejemplo es posible elegir entre una viñeta cuadrada (square), circular (disc, circle) o listas con letras (lower-roman, lower-alpha, upper-alpha, etc.)

Ejemplo:

El código CSS para lograr la lista con viñeta cuadrada es este:

ul{
	list-style-type: square;
}

2) Utilizando imágenes:

En el ejemplo anterior se demostró que es posible variar el estilo de las listas usando los valores que nos da CSS de una forma muy sencilla. Asimismo, en muchas ocasiones, nuestros diseños requerirán de soluciones más estéticas que un simple círculo. Para ello CSS nos da la opción de incluir imágenes en nuestras listas utilizando dos métodos: reemplazar la viñeta por una imagen o añadirla como fondo. La segunda opción suele ser más práctica ya que es posible determinar la ubicación de la imagen desplazándola horizontal o verticalmente e intentar así una visualización similar en distintos navegadores.

Ejemplo:

Para sustituir la viñeta por una imagen simplemente se indica en el CSS la ubicación del archivo:

ul{
	list-style-image: url(rombo.gif);
}

Esto hace que se reemplace la viñeta de la lista por la imagen indicada. Hay que tener en cuenta que cada navegador presenta en pantalla los elementos con algunas pequeñas diferencias entre sí. En esta captura de pantalla se puede observar como varía la posición de la viñeta (y el interlineado también) en tres navegadores distintos:

Ejemplo:

En el ejemplo anterior se tomaron los valores por default de cada navegador, es decir, no se modificó el tamaño ni tipo de letra ni el interlineado de la lista.

La otra opción es anular la viñeta y añadir una imagen de fondo. Esto permite desplazar la imagen en el eje X e Y:

Ejemplo:

En el ejemplo se observa que ahora la diferencia entre navegadores es de apenas 1 pixel entre Opera/IE y Firefox, lo que ya es un logro. El código CSS utilizado para ello es el siguiente:

li{
	list-style: none;
	background-image: url(rombo.gif);
	background-position: left bottom;
	background-repeat: no-repeat;
	padding-left: 15px; 
}

La primera línea anula la viñeta de la lista, la segunda indica el la imagen a utilizar, la tercera la posición con respecto al ítem de la lista (a la izquierda y abajo), la cuarta dice que el fondo no se repita y la quinta desplaza la palabra 15px hacia la derecha para que no tape la imagen. Esto se podría haber escrito en 3 líneas usando el método abreviado de la siguiente manera.

li{
	list-style: none;
	background: url(rombo.gif) left bottom no-repeat;
	padding-left: 15px; 
}

Conclusión

Las listas son realmente muy útiles en el diseño de páginas web, conocer su funcionamiento, el marcado correcto y las capacidades del CSS para manejarlas equivale a tener un gran control en la presentación de la página; sin contar por supuesto con el consecuente ahorro de código y la homogeneidad de las páginas.