Imágenes como hitos de listas con CSS Octubre 8, 2007
Publicado por lineadecodigo en : CSS , trackbackCuando 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).
Lo primero que tenemos que hacer es crear una lista. Para ello creamos una lista desordenada <UL>. El código HTML será el siguiente:
<ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <li>Elemento 4</li> <li>Elemento 5</li> <li>Elemento 6</li> <li>Elemento 7</li> </ul>
Para poner una imagen en el hito del item de la lista utilizaremos la propiedad CSS list-item-image.
OL {
list-style-image: url('documento.gif');
}
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.
OL {
list-style-image: url('documento.gif');
list-style-type: square;
}
Visualizar el ejemplo | Descargar el código
Articulos Similares:
- Lista CSS de números romanos
- Ocultar imagenes con CSS
- Bordes 3D con CSS
- Borde con doble linea mediante CSS
- Calcular el numero de imagenes con JavaScript
Enviar entrada por email
| 
Imprimir
| 10087 visitas
(2 votos, media: 4.50 de 5)
Loading ...
Comentarios»
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..
HOLA QUE TAL ESTOY CREANDO UN SITIO Y QUIERO AGREGAR UN MAPA DE SITIO SON LISTAS PERO DEZPLEGABLES
ABEN COMO HACERLO