Jueves, 27 de enero de 2005

Estilizando listas con CSS

Voy a explicar de manera sencilla como aplicar estilos a listas utilizando imágenes y css, por lo que primero empezaré explicando el concepto de margin y padding.

Los dos se utilizan para aplicar márgenes a un determinado elemento, pero la diferencia entre ellos está en que uno aplica márgenes fuera del elemento y el otro los aplica dentro, tal y como muestra esta imagen:



Por otro lado en una hoja de estilos los márgenes (tanto interiores como exteriores) se aplican de la siguiente manera:

superior derecho inferior izquierdo

Suponiendo que nos ha quedado claro este concepto, empezaremos a aplicar margenes y estilos a la lista (<ul></ul>), en este ejemplo utilizo un margen superior de 4 pixels, uno inferior de 10 pixels y además le especifico que la lista no tenga ningún icono (list-style: none) puesto que ya le vamos a poner nosotros el nuestro con la imagen que tenemos:

UL {
margin: 4px 0 10px 0;
padding: 0;
list-style: none;
}

Con lo que la lista nos quedaría de la siguiente forma:



Continuamos y en el siguiente paso, lo que haremos será aplicar el estilo y márgenes a las opciones de la lista (<li></li>), para las que utilizaremos el siguiente estilo:

UL LI {
margin: 0;
padding: 0 0 0 18px;
line-height: 19px;
background: url('lista.gif') #FFFFFF no-repeat left center;
text-align: left;
color: #808080;
}

A continuación os explico detalladamente cada atributo de este estilo:

La imagen que he utilizado como icono de las opciones de la lista (lista.gif) tiene un tamaño de 15x15, por lo que le he dado un margen interior izquierdo de 18px, esto lo hago para que el texto quede desplazado 3 pixels a la izquierda respecto a la imagen.

Si os fijáis he utilizado el atributo line-height: 19px, que hará que el alto de cada opción de la lista sea de 19 pixels, por lo que así me aseguro que mi imagen quedará centrada con el texto.

En el atributo background le especifico que las opciones de la lista tengan como fondo la imagen lista.gif (url), que dicho fondo sea de color blanco (#FFFFFF), que no se repita (no-repeat), que la alineación horizontal sea a la izquierda (left) y que la alineación vertical sea en el centro (center).

Los atributos text-align y color, creo no hace falta explicarlos, simplemente alinean el texto a la izquierda y le aplican el color #808080, con lo que todos estos estilos dejarían nuestra lista de la siguiente forma:




Y con esto ya tendríamos la lista personalizada con CSS, espero que os sea de utilidad tanto como me fué a mí y espero haberme explicado lo suficientemente bien como para que seáis capaces de hacerlo sin ninguna complicación.

Si podéis aportar algo a este tutorial, hacedlo a través de los comentarios.

Puesto en: CSS | Comentarios (4) | Referencias (0) | Permalink