
Les listes à puces en HTML et en CSS
#1
Comment construire une liste à puces en HTML ?
Une liste c'est une suite de choix. Vous devez baliser chaque choix par des balises 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
.
Ce qui donnera :
- un élément de liste
- un élément de liste
- 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
.
Ce qui donnera :
- un élément de liste
- un élément de liste
- un élément de liste
#2
Qu'est ce que ça donne au niveau CSS ?
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.
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.
#3
Travailler la puce ou la numérotation
Sur une liste non ordonnée
Vous pouvez enlever la puce et mettre une image à la place.
- Oeufs
- Beurre
- Farine
Le style par défaut est disc
- Oeufs
- Beurre
- Farine
Vous pouvez changer le style de la puce.
- Oeufs
- Beurre
- Farine
- 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
.
- Oeufs
- Beurre
- Farine
Vous pouvez choisir une numérotation romaine minuscule,
- Oeufs
- Beurre
- Farine
ou une numérotation romaine majuscule
- Oeufs
- Beurre
- Farine
#4
Imbrication de listes
Il est possible d'imbriquer des listes. Les li
peuvent contenir une autre liste voire d'autres éléments de type block
ou inline
.
- Gâteau
- Oeufs
- Beurre
- Farine
- Vinaigrette
- Huile
- Vinaigre
- Sel
- Cocktail
- Champagne
- Vodka
- Liqueur de fraises