2010/07/23

Personalizando bullets

Normalmente, una lista tipo ul luce así:
  • Item 1
  • Item 2
  • Item 3
Se puede usar CSS para cambiar el tipo del bullet (que por default es disc):
list-style:disc
  • Item 1
  • Item 2
  • Item 3
list-style:circle
  • Item 1
  • Item 2
  • Item 3
list-style:square
  • Item 1
  • Item 2
  • Item 3
list-style:none
  • Item 1
  • Item 2
  • Item 3
list-style:url(flecha_roja.gif)
  • Item 1
  • Item 2
  • Item 3
Para controlar la posición del bullet, se puede usar la técnica de poner la imagen como fondo del item.
En este ejemplo aplico los estilos en línea, para ilustrar la idea. Sin embargo, en un caso real, lo usual es que use clases y bloques u hojas de estilo para indicar lo mismo.

<ul style="list-style:none;">
<li 
  style="background:url(flecha_roja.gif) 1px 2px
  no-repeat; padding-left:10px;">
  Item 1: Bullet más cerca y centrado</li>
<li
  style="background:url(flecha_roja.gif) right 2px
  no-repeat; width: 250px;">
  Item 2: Bullet a la derecha</li>
</ul>

  • Item 1: Bullet más cerca y centrado
  • Item 2: Bullet a la derecha

Puede ver un demo en aquí

Crédito de la imagen: http://www.robbinssports.com

No hay comentarios.:

Publicar un comentario