Más estilos a las listas
Listas de elementos suelen ser cansativas, tediosas de leer. Aunque CSS te entrega varios diseños para variar el típico bullet circular, también te entrega la posibilidad de utilizar una imagen (generalmente un GIF muy liviano, no más de un par de KB) para reemplazarla. Pero el ingenio de alguien que tuvo suficiente tiempo también permite que regules, por ejemplo, el padding entre el bullet y el texto soportado por éste. Mostraré 2 técnicas para que reemplaces el bullet por una imagen determinada. Dependerá de tí cuál técnica utilizar:
Comenzamos con el HTML de una típica lista con unos 5 elementos:
La primera técnica es muy básica y aprovecha la propiedad CSS para listas list-style-image: url(); donde linkeas la imagen que hayas creado para esto:
ul#listacompras1 {
list-style: none;
}
ul#listacompras1 li {
list-style-image: url(imagenes/bullet_valido.gif);
}
Ya la segunda, la idea al igual que en la anterior es sacar el bullet con list-style: none; para luego agregar la imagen como fondo del ítem de lista (background-image), posicionarla si se requiere (background-position) y algo muy importante, especificar que ese fondo no debe repetirse (background-repeat: no-repeat;). Creo pertinente dejar claro (no recuerdo si lo mencione antes) que, a diferencia de la definición de margin y padding, los valores de background-position comienzan desde la izquierda-arriba-derecha-abajo. Por ejemplo:
background-position: right top; (se alineará a la derecha y arriba)
background-position: 5px 0; (estará a 5px de la izquierda pero pegado al margen superior)
Segunda técnica, donde tienes más control en el posicionamiento de la imagen:
#listacompras2 {
padding-left: 10px;
list-style: none;
}
#listacompras2 li {
padding-left: 20px;
background-image: url(imagenes/bullet_flecha.gif);
background-repeat: no-repeat;
background-position: 0 0;
}