open

Les listes à puces en HTML et en CSS

#1 Comment construire une liste à puces en HTML ? open

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 :

  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.

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 ? open

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

Je mets des bordures autours des boîtes.

Boite CSS par defaut

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.

Style par défaut d'une li

Les ul sont des boîtes en display block

Style par défaut d'une ul

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 open

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.

  1. Oeufs
  2. Beurre
  3. Farine

Vous pouvez choisir une numérotation romaine minuscule,

  1. Oeufs
  2. Beurre
  3. Farine

ou une numérotation romaine majuscule

  1. Oeufs
  2. Beurre
  3. Farine

#4 Imbrication de listes open

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