Comunidad de diseño web y desarrollo en internet online

Listas personalizadas

La Red es una pérdida de tiempo. Y eso es precisamente lo que está bien.
William Gibson, escritor.

Ahora vamos a aprender cómo modificar las listas desordenadas para que tengan viñetas personalizadas. Para ello, necesitaremos una imagen pequeñita que haga de viñeta. En Internet hay muchísimas para descargar, aunque puedes dibujar las tuyas propias. Supondremos que la imagen se llama bullet.png.

Código XHTML

Extremadamente simple. Se trata de una lista sin ordenar, sin más misterio:

<ul>
    <li>Sonata Arctica</li>
    <li>Nightwish</li>
    <li>HIM</li>
</ul>

La lista

Ahora la parte de CSS. Disponemos de una propiedad que se llama list-style-image, pero da problemas con ciertas medidas de viñetas. Así que tenemos que guarrear un poco el código. Para el elemento ul sería:

ul {
    padding-left: 10px;
    margin-left: 10px;
    list-style-type: none;
}

Lo más importante es el list-style-type: none, que se encarga de quitar esas viñetas feas que pone el navegador por defecto. El padding y el margin es para sangrar la lista (puedes poner los valores que quieras, o incluso quitarlos).

Los ítems

¡Ya sólo queda poner nuestra viñeta! Para ello, modificamos el estilo de los li que estén en listas desordenadas:

ul li {
    padding-left: 12px;
    background: url(bullet.png) 0em 0.5em no-repeat;
    margin-bottom: 1em;
}

Lo primero que vemos es el padding} por la izquierda. Esto no es el sangrado, es una distancia de relleno que ponemos para que el texto del ítem no esté encima de la viñeta. Este valor lo tienes que modificar dependiendo de las dimensiones de la imagen de tu viñeta.

Después, nos encontramos con la propiedad background}. Después de establecer la imagen, debemos indicar en qué posición (recuerda: primero horizontal, luego vertical) se encuentra la viñeta. ¡Aquí hay truco! Como ves, trabajamos con em y no con medidas absolutas en píxeles. ¿Por qué? Porque así nos vale para cualquier tamaño del texto.

Recuerda que 1em equivale a la anchura de la letra M.

Lógicamente, es muy difícil dar con el valor correcto a la primera, así que habrá que probar varias veces hasta topar con el que mejor quede. Ah, no se nos puede olvidar el i para evitar el mosaico.

Por último, margin-bottom se encarga de establecer la separación entre un ítem y otro de la lista.

Muy sencillo, ¿no?

 

Información adicional

Contenido publicado bajo licencia Creative Commons. Belén Albeza (BenKo)

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.