Formats des puces de liste

Dans l'article précédant, nous avons vu qu'il existait trois types de listes : les listes à puce, les listes numérotées et les listes de définition.
Aujourd'hui, nous examinerons les différents formats de liste à puce.

On peut personnaliser le format des puces de listes en spécifiant un style CSS.
Ainsi les formats personnalisés permettent de :

• changer l'aspect de la puce par les styles list-style-type ou list-style-image
• la position de la puce dans la liste par le style list-style-position

Aspect des puces

Il y a deux familles d'aspect de puces : les types standard et le type personnalisé (par une image) définis respectivement par list-style-type et list-style-image.
Voici un résumé des valeurs standard admises :

Code HTML:

<ul>
  <li style="list-style-type:disc">disc</li>
  <li style="list-style-type:circle">circle</li>
  <li style="list-style-type:square">square</li>
  <li style="list-style-type:decimal">decimal</li>
  <li style="list-style-type:lower-roman">lower-roman</li>
  <li style="list-style-type:upper-roman">upper-roman</li>
  <li style="list-style-type:lower-alpha">lower-alpha</li>
  <li style="list-style-type:upper-alpha">upper-alpha</li>
  <li style="list-style-type:none">none</li>
  <li style="list-style-image:url(http://idata.over-blog.com/0/01/15/48/puce.gif)">Image personnalisée</li>
</ul>

Résultat:

• disc
• circle
• square
• decimal
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha
• none
• Image personnalisée

Remarquez que les types decimal, lower-roman, upper-roman, lower-alpha et upper-alpha sont normalement destinés aux listes numérotées mais qu'ils peuvent aussi s'appliquer aux autres types de liste.
De nombreuses personnes utilisant une image personnalisée définissent le type à none afin de masquer le type de liste par défaut. Cependant cette méthode est à éviter car certains clients n'autorisent pas les images et la liste sera par conséquént sans aucune puce.
A l'inverse, si vous surchargez dans votre CSS le format de liste avec une image personnalisée et que vous souhaitez revenir dans un contexte particulier à un format sans image, vous pouvez utiliser la valeur none comme argument de list-style-image :

Code CSS:

/* format de puce général défini avec une image */
li {
 list-style-image: url(http://idata.over-blog.com/0/01/15/48/puce.gif);
}
/* format puce dans le contexte #content normal */
#content li {
 list-style-image: none;
}

Positionnement des puces

Deux positionnements de puces sont possibles : inclus dans la boîte de texte ou hors de celle ci :

Code HTML:

<ul>
  <li style="list-style-position:inside;border:solid 1px">Inclus dans la boîte</li>
  <li style="list-style-position:outside;border:solid 1px">hors de la boîte</li>
</ul>

Résultat:

• Inclus dans la boîte
• hors de la boîte