Imágenes como hitos de listas con CSS

08/Oct/2007 CSS , 3 Comentarios

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 iconografías ofrecidas por la especificación de HTML (circulo, cuadrado y elipse).

Para tener imágenes como hitos de listas con CSS lo primero que tenemos que hacer es crear una lista. Para ello creamos una lista desordenada ul. El código HTML será el siguiente:

  1. <li>Elemento 1</li>
  2. <li>Elemento 2</li>
  3. <li>Elemento 3</li>
  4. <li>Elemento 4</li>
  5. <li>Elemento 5</li>
  6. <li>Elemento 6</li>
  7. <li>Elemento 7</li>
  8. </ul>

Para poner una imagen en el hito del item de la lista utilizaremos la propiedad CSS list-item-image.

  1. OL {
  2. list-style-image: url('documento.gif');
  3. }

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

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

  1. OL {
  2. list-style-image: url('documento.gif');
  3. list-style-type: square;
  4. }

Y este código tan sencillo nos sirve para tener imágenes como hitos de listas con CSS.

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Imágenes como hitos de listas con CSS”

Víctor Cuervo

Ronald Orantes

Hola, gracias por el post, estuve probando y no me funcionaba, cambie el OL por UL en el estilo y ya funciono correctamente, asi me quedo:

UL {
list-style-image: url(‘documento.gif’);
}

Víctor Cuervo

Andre

HOLA QUE TAL ESTOY CREANDO UN SITIO Y QUIERO AGREGAR UN MAPA DE SITIO SON LISTAS PERO DEZPLEGABLES

ABEN COMO HACERLO

Víctor Cuervo

abraham

Disculpa, keria hacerte una pregunta ojala y me puedas responder, de antemano gracias..

Yo kisiera saber como podria ser el codigo para ke en un JOptionPane.showMessageDialog me pudiera desplegar texto pero con una imagen por ejemplo:

¿Cuanto es dos “Manzanas” mas tres “Manzanas”?

y ke las manzanas fuera una imagen pequeña. la verdad no se si esto se pudiera hacer pero agradeceria toda la ayuda posible..

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*