Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a CSS: Personalizar viñetas en listas desordenadas

Datos de búsqueda

CSS: Personalizar viñetas en listas desordenadas

Cuando se quiere una viñeta personalizada para listas desordenadas en XHTML no hay más que crear la imagen para la viñeta, y después adaptar la hoja de estilo para hacer la personalización.

Primero hay que definir las reglas para la etiqueta ul:

ul {
padding-left: 0; /*Limpieza de márgenes (se puede cambiar)*/
margin-left: 36px; /*Indentado de la lista (se puede cambiar)*/
list-style-type: none; /*Quitar estilo de viñeta*/
}

Y después las reglas para la etiqueta li:

li {
background: url(imagen.gif) left center no-repeat;
margin-bottom: 10px;
padding-left: 15px;
}

Ver ejemplo de viñetas personalizadas

Si no dispones de una imagen o no se te ocurre como hacerla puedes encontrar un montón de imágenes en Bullet Madness (la imagen utilizadas en el ejemplo procede de ese sitio).

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay 7 comentarios a “CSS: Personalizar viñetas en listas desordenadas”

Anonymous dice:

Fecha de comentario: 2007/10/02 17:59

Esta entrada se merece un comentario 😀

Roberto Pérez dice:

Fecha de comentario: 2008/11/03 07:47

Hola, me parece genial que puedas modificar la viñeta de una lista desordenada.

Pero creo que es mucho rollo.

Yo recomiendo solo poner en una hoja de estilos css, lo siguiente

li {
list-style:url(micarpeta/miImagen.gif);
}

obviamente “micarpeta/miImagen” depende de tu organización de tu sitio web.

jervert dice:

Fecha de comentario: 2008/11/03 11:53

La propiedad list-style y sus variantes son otra alternativa para llegar al objetivo de poner una imagen personalizada a cada elemento de lista.

Pero con esa propiedad se pierde un poco el control del posicionamiento de la imagen, y de los márgenes y rellenos del elemento de lista UL y LI.

Pero el utilizar el método expuesto en esta entrada o el que comentaba Roberto Pérez dependerá de la situación ante la que nos encontremos.

Miguel Ortiz dice:

Fecha de comentario: 2011/01/04 01:59

Muy útil, bien redactado y puntual.

Me sirve, thx.

claudia dice:

Fecha de comentario: 2011/11/28 14:03

muy bueno.
muchas gracias por la ayuda!!
Sabia que se podia hacer con css pero no encontraba
mi apunte de curso

gabriel dice:

Fecha de comentario: 2012/02/19 23:37

excelente aporte muy bueno me sirvio tenia esa duda pero gracias men

enmanuel dice:

Fecha de comentario: 2013/05/16 22:59

esta muy bueno, graacias

Información del sitio