Les listes à puces

Voici un petit tutoriel pour modifier l'aspect des listes à puces sur votre blog. En CSS, la liste à puces se traduit par li. Dans les modules, on jouera donc par exemple sur la classe box-content li.

Mais avant voici la réponse au quiz d'avant-hier :
Le design inédit était celui de Dofus dont Sram, la belle au couteau est issue.
Bravo à Urban qui a été le premier a donner la bonne réponse, au Majeur dont la mémoire ne fait pas encore défaut et à Bernard qui a copié (le vilain !)

Merci aux autres pour leur participation et pour certains, leur message de soutien.

¤¤¤

Modifier la couleur des puces d'une liste :

Remplacer #323232 par la couleur hexadécimale de votre choix.
li {color:#323232; }

¤¤¤

Modifier l'aspect d'une puce :

Pour modifier l'aspect d'une puce, on utilise la propriété list-style-type.
Exemple :
li {list-style-type: circle; }

Pour les listes non ordonnées :

• disc : un disque
• circle : un cercle.
• square : un carré.
• none : aucune puce ne sera utilisée.

Pour les listes ordonnées, on a le choix entre autres :

• decimal : des nombres (1, 2, 3, 4 ...)
  
• decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04 ...)
  Remarque : style de liste testée, fonctionne sous Firefox mais pas sur Internet Explorer
• upper-roman : numérotation romaine, en majuscules (I, II, III, IV ...)
• lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv ...)
• upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D ...)
• lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d ...)
• lower-greek : numérotation grecque.
  Remarque : style de liste testée, fonctionne sous Firefox mais pas sur Internet Explorer

¤¤¤

Mettre une image à la place de la puce :

On utilise la propriété list-style-image. Ça fonctionne de la même manière que lorsque vous voulez mettre un fond à votre blog, il fait indiquer l'adresse url de l'image à utiliser.

li { list-style-image : url (http://blablabla_adressedel'image) ; }

Remarque :
L'image de la puce peut être de n'importe quel format (.png, .gif, .jpeg, etc ...).
Attention cependant, l'image ne doit pas être trop grande sinon elle sera coupée. Je vous conseille d'utiliser des images de 15 x 15 pixels environ.

¤¤¤

Changer l'affichage d'une puce au passage de la souris (roll-over) :

Il suffit d'écrire le même code que précédemment, mais en ajoutant la définition hover.

li {color: #323232; }
li:hover { color: #FFFFFF;  }

¤¤¤


Retrait d'une liste :

Une propriété qui s'appelle list-style-position permet d'indiquer si l'on souhaite que la liste à puces soit mise en retrait ou non.
Il y a deux valeurs :

• inside : la liste n'est pas mise en retrait.
• outside : la liste est mise en retrait

A gauche, la liste n'est pas mise en retrait :
li {list-style-position: inside; }
A droite, la liste est mise en retrait :
li {list-style-position: outside; }