Les listes à puces en HTML et en CSS

Une liste c'est une suite de choix. Vous devez baliser chaque choix par des balises li.

<li>Un élément de liste</li> <li>Un élément de liste</li> <li>Un élément de liste</li>

Ordonnée ou pas ?

Vous devez vous posez cette question : Est ce que si je change l'ordre alors le sens change ?

Si le sens change c'est une liste ordonnée. L'ordre est important !

Vous devez placer votre liste dans un élément ol.

<ol> <li>Un élément de liste</li> <li>Un élément de liste</li> <li>Un élément de liste</li> </ol>

Ce qui donnera :

1. un élément de liste
2. un élément de liste
3. un élément de liste

Si le sens ne change pas c'est une liste non ordonnée.

Vous devez placer votre liste dans un élément ul.

<ul> <li>Un élément de liste</li> <li>Un élément de liste</li> <li>Un élément de liste</li> </ul>

Ce qui donnera :

• un élément de liste
• un élément de liste
• un élément de liste

On va déjà regarder comment c'est agencé par défaut.

Je mets des bordures autours des boîtes.

Les li sont des boîtes en display list-item. Avec cette information quelque part le moteur de rendu sait qu'il doit dessiner quelque chose (puce ou nombre) devant la boîte.

Les ul sont des boîtes en display block

Une fois de plus ces marges ne sont pas négligeables notamment sur un smartphone. 40px sur un écran de 320px ça fait 1/8 ième de l'espace.

Certains choisissent de faire un reset CSS de ces marges.

ul { margin:0; padding:0; }

On peut aussi changer le mode d'affichage de la boîte. Il n'y aura plus de puce devant la boîte.

Si on passe la liste en block.

Si on passe la liste en inline-block.

Et maintenant on peut décider d'être en inline-block lorsqu'il y a de la place et en block lorsqu'il n'y en a pas. C'est un très bon moyen pour faire des menus responsive.

Sur une liste non ordonnée

Vous pouvez enlever la puce et mettre une image à la place.

ul#list-avec-image { list-style-type : none ; list-style-image : url(img/arrow-16.png); }

• Oeufs
• Beurre
• Farine

Le style par défaut est disc

• Oeufs
• Beurre
• Farine

Vous pouvez changer le style de la puce.

ul { list-style-type : circle ; }

• Oeufs
• Beurre
• Farine

ul { list-style-type : square ; }

• Oeufs
• Beurre
• Farine

Sur une liste ordonnée

Par défaut la numérotation sera décimale. Vous pouvez utiliser les attributs HTML start ou reversed.

<ol start='5' reversed > <li>Oeufs</li> <li>Beurre</li> <li>Farine</li> </ol>

5. Oeufs
6. Beurre
7. Farine

Vous pouvez choisir une numérotation romaine minuscule,

ul { list-style-type : lower-roman ; }

1. Oeufs
2. Beurre
3. Farine

ou une numérotation romaine majuscule

ul { list-style-type : upper-roman ; }

1. Oeufs
2. Beurre
3. Farine

Il est possible d'imbriquer des listes. Les li peuvent contenir une autre liste voire d'autres éléments de type block ou inline.

1. Gâteau
   • Oeufs
   • Beurre
   • Farine
2. Vinaigrette
   • Huile
   • Vinaigre
   • Sel
3. Cocktail
   • Champagne
   • Vodka
   • Liqueur de fraises