DEVENIR-WEBMASTER.COM Log In
 18
close

Les listes à puces en HTML et en CSS

Visiter ma chaine Youtube

# Comment construire une liste à puces en HTML ? close

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

Liste de choix

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.

Liste ordonnée

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.

Liste non ordonnée

Ce qui donnera :

# Qu'est ce que ça donne au niveau CSS ? close

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.

Reset des marges par défaut

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.

# Travailler la puce ou la numérotation close

Sur une liste non ordonnée

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

Images à la place des puces

Le style par défaut est disc

Vous pouvez changer le style de la puce.

Puces de type circle
Puces de type square

Sur une liste ordonnée

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

Liste ordonnée avec start et reversed
  1. Oeufs
  2. Beurre
  3. Farine

Vous pouvez choisir une numérotation romaine minuscule,

Numérotation de type romain minuscule
  1. Oeufs
  2. Beurre
  3. Farine

ou une numérotation romaine majuscule

Numérotation de type romain majuscule
  1. Oeufs
  2. Beurre
  3. Farine

# Imbrication de listes close

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