CSS-Sésamo III: Listas con viñetas personalizadas
Permalink | Archivado en: CSS, Diseño y Desarrollo Web, Tutoriales
Hola, soy Coco, y con la excusa del post anterior os voy a enseñar a personalizar vuestras listas desordenadas para que tengan viñetas personalizadas.
Lo primero que necesitamos es una lista, así que la parte XHTML sería así, sin más misterio:
<ul>
<li>Sonata Arctica</li>
<li>Nightwish</li>
<li>HIM</li>
</ul>
Luego necesitamos una imagen que haga de viñeta. Esto es fácil si os descargasteis cierto architivo… Si no, podéis hacer vuestras propias vieñetas. Aquí supondremos que la guardamos en una subcarpeta, así que la ruta sería images/bullet.gif.
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 tendremos que guarrear un poco el código. 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 (podéis poner los valores que queráis, o incluso quitarlos).
¡Y ahora 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(images/bullet.gif) 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 que ponemos para que el texto del ítem no se escriba encima de la viñeta. Este valor lo tenéis que modificar dependiendo de la anchura de la imagen de vuestra viñeta.
Después, nos encontramos con la propiedad background. Después de establecer la imagen, tenemos que indicar en qué posición (primero horizontal, y luego vertical) se encuentra la viñeta. ¡Aquí hay truco! Como veis, trabajamos con em y no con medidas absolutas en píxeles. ¿Por qué? Porque así nos vale para cualquier tamaño del texto. 1 em equivale a lo que mide el ancho de la letra M en el tamaño de texto que estemos trabajando. Así que si hacemos la fuente más grande o más pequeña, no importa. Lógicamente es muy difícil de ver el valor correcto a la primera, así que hay que probar varias veces hasta que demos con el que mejor quede. Ah, no se nos puede olvidar el no-repeat para que la viñeta no haga mosaico.
Por último, margin-bottom se encarga de establecer la separación entre un ítem y otro de la lista.
¡Nos vemos en el próximo capítulo!
Coco
12 comentarios »
Si quieres hacer un trackback, usa esta TrackBack URI
Escribe un comentario
Los párrafos y saltos de línea se ponen de forma automática. La dirección de e-mail no se mostrará nunca. Se permiten las siguientes etiquetas XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Y en dónde está el ejemplo de cómo queda ??
Comentario de oscar — 10-06-05 11:57 pm
En cualquier lista de viñetas de esta página
(mira por ejemplo en la sección de archivos)
Comentario de BenKo — 11-06-05 10:53 am
gracias ! a ver si lo pongo en práctica en mi blog !
Comentario de hmmm — 12-06-05 8:39 pm
yo por lo general uso algo asi:
ul li {
list-style-type: none;
list-style-image: url(img/bullet.gif);
}
en vez de usar el fondo para el bullet, aun que sea contradictorio, ya que primero le dices que no muestre nada y luego que muestre una imagen, pero bueno, funciona.
Comentario de manu — 16-06-05 10:57 am
No funciona en IExplorer, alguien sabe como hay que hacer para que lo haga?
Comentario de Danivx — 18-10-05 2:10 pm
Sí funciona en Internet Explorer.
Comentario de BenKo — 18-10-05 6:57 pm
[...] El problema que tenemos es que las listas son feas. Bueno, ya vimos cómo hacerlas más bonitas, pero quizás queramos algo más especial para nuestro menú. CSS nos da la solución y ya no tendréis excusa para hacer un menú en Flash [...]
Pingback de demasiada Cafeína v3.0 — 02-11-05 1:54 pm
queda chulo! además está muy clarito explicao (gracias)
Comentario de juliantetodo — 02-12-05 12:38 am
Los mejores textos sobre CSS y estándares web en castellano
Uno de las obsesiones de Sentido Web es que la mayoría de la información se encuentra en inglés. A raíz de esta lista, hemos realizado, junto a José Luis Antúnez, esta selección de los que consideramos los mejores artículos sobre…
Trackback de Sentido Web — 05-09-06 11:24 am
[...] CSS-Sésamo III: Listas con viñetas personalizadas [...]
Pingback de Los mejores textos sobre CSS y estándares web en castellano « Disenia — 09-05-07 4:57 pm
oe coco quiero saber q son viñetas personalizadas para una tarea
Comentario de Jhon — 23-05-08 7:13 pm
Hola, necesito ayuda para lograr mostrar imágenes para una viñeta utilizando dos niveles. Por ej.:
* viñeta 1
* viñeta 2
– sub viñeta 2.1
– sub viñeta 2.2
etc, etc, pero en lugar de utilizar las imagenes por defecto, utilizar la img1 para viñetas y la img2 para subviñetas.
Gracias…
Comentario de Damián — 28-05-08 1:50 am