Imágenes como hitos de las listas

Cuando creamos una lista en HTML, por cada elemento de la lista, podemos detectar dos partes: la marca o hito que inicia el elemento y el texto del item de la lista. Gracias a CSS podemos conseguir que los hitos de las listas sean imágenes, incrementando así el número de iconografias ofrecidas por la especificación de HTML (circulo, cuadrado y elipse).

Para poner una imágen en el hito del item de la lista utilizaremos la propiedad list-item-image.

OL {
   list-style-image: url(miimagen.jgp);
}

El nombre del fichero que contiene la imágen deberá de especificarse mediante una URL: url (url_del_fichero). Donde la URL podrá ser relativa (../imagenes/documento.gif)) o absoluta (http://www.aulambra.com/imagenes/documento.gif).

Si utilizamos imágenes como hitos podemos tomar la precaución de espeficar un estilo sobre los items por si acaso el navegador no encuentra el fichero con la imágen. Los estilos los especificamos mediante la propiedad list-style-type.

OL {
   list-style-image: url(miimagen.jgp);
   list-style-type: square;
}

Usuarios que han visto este tema también han visto...

- Cambiando de color las barras de scroll
- CSS: Etiquetas
- Cómo solucionar problemas en CSS
- Centrar DIV horizontal en CSS
- Maquetar una galería de fotos con CSS usando listas

- Versión imprimible de este documento

- Enviar por e-mail este documento