Más estilos a las listas

14/nov/2006 20

Listas de elementos suelen ser cansativas, tediosas de leer. Aunque CSS te entrega varios diseños para variar el típico bullet circular, también te entrega la posibilidad de utilizar una imagen (generalmente un GIF muy liviano, no más de un par de KB) para reemplazarla. Pero el ingenio de alguien que tuvo suficiente tiempo también permite que regules, por ejemplo, el padding entre el bullet y el texto soportado por éste. Mostraré 2 técnicas para que reemplaces el bullet por una imagen determinada. Dependerá de tí cuál técnica utilizar:

Comenzamos con el HTML de una típica lista con unos 5 elementos:

<ul id="listacompras">
    <li><a href="#">Arroz</a></li>
    <li><a href="#">Azúcar</a></li>
    <li><a href="#">Shampoo</a></li>
    <li><a href="#">Cerveza</a></li>
    <li><a href="#">Hongo Alucinógeno</a></li>
</ul>

La primera técnica es muy básica y aprovecha la propiedad CSS para listas list-style-image: url(); donde linkeas la imagen que hayas creado para esto:

ul#listacompras1 {

    list-style: none;
}
ul#listacompras1 li {
    list-style-image: url(imagenes/bullet_valido.gif);
}

Ya la segunda, la idea al igual que en la anterior es sacar el bullet con list-style: none; para luego agregar la imagen como fondo del ítem de lista (background-image), posicionarla si se requiere (background-position) y algo muy importante, especificar que ese fondo no debe repetirse (background-repeat: no-repeat;). Creo pertinente dejar claro (no recuerdo si lo mencione antes) que, a diferencia de la definición de margin y padding, los valores de background-position comienzan desde la izquierda-arriba-derecha-abajo. Por ejemplo:

background-position: right top; (se alineará a la derecha y arriba)
background-position: 5px 0; (estará a 5px de la izquierda pero pegado al margen superior)

Segunda técnica, donde tienes más control en el posicionamiento de la imagen:

#listacompras2 {
    padding-left: 10px;
    list-style: none;
}
#listacompras2 li {
    padding-left: 20px;
    background-image: url(imagenes/bullet_flecha.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
}

Ver ejemplo de ambas listas

Comentarios

  1. freddy [#]

    Aunque ya conocia estas tecnicas, la explicacion estuvo muy buena, clara y sencilla :)

    De paso te fecilito por tu blog!

    Saludos

  2. burrosh [#]

    No te valida el HTML, he probado y esto si que lo valida;

    Untitled Document

    Reemplazar bullets por imágenes – Simple

    Arroz
    Azúcar
    Shampoo
    Cerveza
    Hongo Alucinógeno

    Reemplazar bullets por imágenes – Controlado

    Arroz
    Azúcar
    Shampoo
    Cerveza
    Hongo Alucinógeno

  3. burrosh [#]

    Lo siento, no se pegar html en tus comentarios, bórralos todos si quieres.

    Lo único que varié fue declarar la “ul” fuera de la div;

    “div id=”listacompras1″”
    “ul”
    “li>Arroz
    “li>Azúcar
    “li>Shampoo
    “li>Cerveza
    “li>Hongo Alucinógeno
    “/ul>

    esto si que lo valida.

  4. CSSLab Admin [#]

    Hola burrosh, en realidad para mi la validacion no es un gran criterio al formatar sitios XHTML, solucione un espacio q no me dejaba validar el CSS, pero el HTML no lo hace por un detalle en los li’s mas q donde dejo el ID, si en el UL o en el DIV.

    gracias por tu reparo, salu2

  5. burrosh [#]

    OK! yo es que siempre busco la validacion de Html, creo que para Google y el resto de buscadores aporta algo. Si dejas colocas el “id” en el “div” y en la siguiente linea abres “ul” ya te lo valida, pero bueno es una decision tuya.
    Salud! y felicidades por el blog!

  6. Más estilos a las listas « Cosas sencillas [#]

    […] Ver el resto del artículo en CSSLab. […]

  7. omar [#]

    Hola admin de csslab :),
    queria sólo hacerte una pregunta, estoy aprendiendo un poco de css, se html, y tengo ganas de hacer una web en condiciones, más que nada por aprender. Me ha gustado mucho tu web, pero aqui viene mi duda.. has utilizado algun CMS? o esta realizada sólo con css y xhtml?Es que no mencionas si utilizas WP, Joomla…y supongo que si no lo utilizas habras usado php y mysql, ajax o algo parecido no??

    muchas gracias,
    espero tu contestacion me interesa bastante 😉

  8. CSSLab Admin [#]

    Omar, utilizo WordPress generalente para mis blogs, me parece q es el mas versatil de los administradores de blogs hoy por hoy. en el meta (para las estadisticas) dice q utilizo WordPress 2.0.4, pero no suelo publicitarlo en el diseño del sitio mismo. aparte del cms, el sitio si esta construido en xhtml transitional. php y mysql soporta el sitio, y javascript para algunos efectos (como el de la etiqueta).

    salu2

  9. Alexander [#]

    Excelente Web !!!

    Una pregunta: ¿ Cómo haces los tooltips que aparecen en los viculos ?

    Se puede hacer solo con css ? si es asi cómo?

    de antemano Gracias !!!!!

  10. CSSLab Admin [#]

    alexander, ese tooltip es un plugin de wordpress, q utiliza javascript para el funcionamiento y css para el estilo grafico. en este postpodrás encontrar mas ejemplos para q utilices en tu mismo proyecto web.

  11. Alexander [#]

    Gracias !!!

    Excelentes recursos !

  12. Rodrigo [#]

    Hay un detalle, el background-position se define según las agu7jas del reloj, o sea, Arriba, derecha, abajo e izquierda. Un pequeño detalle! :)

    Felicidades por tu sitio realmente soy un seguido frecuente de CSS Labs, haz hecho un excelente trabajo! :)

    Sube más podcast!

    Rodrigo

  13. CSSLab Admin [#]

    hola rodrigo, gracias por el animo. sobre el background-position, es algo bien particular. aunq algunos browsers interpretan bien el posicionamiento como las agujas del reloj (al igual q padding y margin lo hacen), la W3C recomienda otra cosa. por eso lo quise aclarar en este post, y muchas gracias por notarlo.

    sobre el tema podcast, ganas no faltan, pero me gustaria q fuera mas inteactivo, estoy viendo si tengo por lo menos un invitado en el prox. alguien se ofrece? saludos!

  14. Sobre las listas y sus estilos « Cosas sencillas [#]

    […] Más estilos a las listas […]

  15. carmen [#]

    quisiera saber si Explorer 6 admite que una lista lleve un background con una imagen y un list-style-image: url(imagenes/bullet_valido.gif a la vez
    Gracias

  16. CSSLab Admin [#]

    Carmen, son 2 cosas diferentes, asi q si si las admite (no se contraponen).
    Salu2

  17. CSSLab » Listo para las listas [#]

    […] Artículos con tags similares La semántica en la Web 3.0Selectores avanzados de atributosmenúes y la class .selectedSEO y la web semánticaRecursos GráficosMás estilos a las listasEl porqué de no utilizar tablasDiseño a oscuras […]

  18. Antonio [#]

    Puntualizar algo sobre la compatibilidad del background-image con el list-style-image.

    Sólo funciona correctamente bajo Firefox y Opera.

    Si por ejemplo quisieramos hacer un listado en el que cada item (que contendría un enlace) tenga apariencia de botón, usando para esto una imagen de 1px de ancho y 30px de alto como fondo con repeat-x, y además desearamos usar una imagen para el bullet, la cosas se desmadran, el bullet, el fondo y el texto no aparecen alineados, y además, aún usando inside la imagen del bullet se queda fuera a la izquierda.

    Al menos yo no he conseguido que funcione en IEx (incluido el 7), Firefox y Opera si alinean correctamente los elementos.

    Saludos y felicitaciones por la página, es de lo más útil.

  19. CSSLab Admin [#]

    Antonio, gracias por la aclaracion. List-style-image no funciona de lo mas bien en todos los browsers, por precisamente problemas de alineacion, por eso recomiendo utilizar background-image para reemplazar esos bullets por imagenes. si ademas necesitamos un fondo del boton, lo incluiria junto al bullet. Salu2.

  20. Daniela [#]

    Hola…este artículo está buenísimo…y por que gracias a los otros aqui expuestos he solucionado varios problemillas, quisiera saber si pueden ayudarme con esto: tengo un elemento flotante hacia la izquierda(un anchor (a) que contiene una imagen (img) y al lado derecho una lista (ul)…el problema es que los bullets no se ven en todos los exploradores, de hecho, solo firefox lo acomoda bien el resto esconde los bullets detras del elemento flotando hacia la izquierda. Espero que me puedan ayudar con esto, saludos!!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab