11 janvier 2010

Afficher des puces dans les sous-menus

Le sélecteur correspondant à l'affichage des puces dans les sous-menus est navlinks ul.
Par défaut, il est réglé pour ne rien (none) afficher :

.navlinks ul {
          list-style-type: none;
}

On peut facilement afficher de petites images en remplaçant simplement la valeur none par :

disc pour un disque plein,
circle pour un disque creux
ou square pour un carré.

On peut en afficher d'autres en remplaçant list-style-type par list-style-image. Exemple :

.navlinks ul {
          list-style-image: url(URL de l'image);
}

article_puce 
exemple de liste avec une puce-image

L'image choisie pour servir de puce doit être très petite, pas plus de 20 pixels de côté.

article_puce2 
exemple de puce-image (22px x 20px)

Posté par Michal53 à 09:30 - - Permalien [#]
Tags : , , , , , ,