Las listas en HTML (2)

Si las listas parecen tener tan pocas alternativas ¿por que se usan tanto? Porque son cómodas pero, para sacarles provecho hay que entender un poco como las afectan las propiedades CSS [más información]

Por defecto, la separación entre un item y otro es equivalente a la altura de la fuente. Eso, lo controlamos con la propiedad margin o, individualmente con margin-top y margin-bottom; sólo hay que tener en cuenta que los márgenes son "invisibles" es decir, el tamaño del elemento no cambia. Esto que parece raro, es fácil de entender si le colocamos un color de fondo [más información]

Otra forma es usar la propiedad height pero, aumentar la altura, no hará que se alineen los textos. Lo mejor es utilizar la propiedad line-height. Con ella, aumentamos el espacio que ocupa el texto y siempre lo veremos centrado verticalmente:

Lista Normal	Propiedad margin	Propiedad height	Propiedad line-height

Una de las propiedades de las lista que les da flexibilidad es display. Por defecto, los items se muestran una debajo del otro pero si les agregamos la propiedad display:inline, veremos los items uno al lado el otro. Eso es lo que normalmente se hace para crear menús.

ITEM 1 ITEM 2 ITEM 3	ITEM 1 ITEM 2 ITEM 3
background-color: #555555;	background-color: #555555; display: inline; margin-left: 10px; padding: 2px 5px;

Con la propiedad list-style-image podemos personalizar las listas cambiando los bullets por una imagen cualquiera. Si la colocamos en UL, la imagen se usará en todos los items LI:

<ul style="list-style-image: url(URL_imagen)">

Si la colocamos en LI, será válida para cada item así que podrá haber varias en una misma lista:

<li style="list-style-image: url(URL_imagen)">

ITEM 1 ITEM 2 ITEM 3

ITEM 1 ITEM 2 ITEM 3

ITEM 1 ITEM 2 ITEM 3

En todos los casos, UL debe tener un padding-left de 1.5em como mínimo porque sino, la imagen aparecerá "partida":

• ITEM 1
• ITEM 2
• ITEM 3

Como bajo ciertas condiciones, el uso de list-style-image suele tener problemas en IE, últimamente se está reemplazando esta propiedad por background que funciona con cualquier etiqueta. Esto, incluso, nos permite tener un mejor control sobre cada item ya que si eliminamos list-style-type, podemos manejar las listas de modo más sencillo.

Por ejemplo, de esta manera podemos implementar un efecto rollover:

ITEM 1 ITEM 2 ITEM 3 ITEM 4	ITEM 1 ITEM 2 ITEM 3 ITEM 4	ITEM 1 ITEM 2 ITEM 3 ITEM 4

UL { list-style-type: none; margin: 0 auto; padding: 0; width: 160px; } UL li { background: transparent url(URL_imagen1) no-repeat left 50%; cursor: pointer; padding: 0 0 0 20px; line-height: 20px; } UL li:hover { background: transparent url(URL_imagen2) no-repeat left 50%; }

UL { list-style-type: none; margin: 0 auto; padding: 0; width: 160px; } UL li { background: transparent url(URL_imagen1) no-repeat left 50%; cursor: pointer; padding: 0 0 0 20px; line-height: 20px; } UL li:hover { background: #FF9933 url(URL_imagen2) no-repeat left 50%; color: #000000; }

UL { list-style-type: none; margin: 0 auto; padding: 0; width: 160px; } UL li { background: transparent url(URL_imagen1) no-repeat left 50%; cursor: pointer; line-height: 20px; padding: 1px 0 1px 20px; } UL li:hover { background: transparent url(URL_imagen2) no-repeat left 50%; border-bottom: 1px solid #800000; border-top: 1px solid #800000; padding: 0 0 0 20px; }