Personnalisez une liste HTML en CSS

Partagez si vous aimez ->
MC: liste html

Les listes HTML, aussi appelées listes à puces, sont très couramment employées sur le web. Sémantiquement, elles indiquent une collection d’élément, ce qui se retrouve dans de nombreux cas de figures, que ce soit dans le design ou le contenu : liste de commentateurs, étapes de fabrication de votre produit, liste de produits à vendre, liste de blogs amis, entrées du menu de navigation…

Ni block, ni inline

Une liste HTML est un élément de type « list-item », et non de type « block » comme on le croit souvent. Elle possède les propriétés des éléments « block » comme « width » (la largeur), « height » (la hauteur), « text-align » (alignement du texte)… mais aussi des propriétés spécifiques.

Lesquelles ?

C’est ce que nous allons voir maintenant.

Puce carré ou puce ronde ?

HTML

<ul>
<li>Pomme</li>
<li>Banane</li>
<li>Citron</li>
</ul>

Tous les exemples de cet article sont basés sur cette liste HTML.

CSS

ul li{
list-style-type: square; /* style de la puce */
list-style-position : inside; /* position de la puce */
}

Résultat

  • Pomme
  • Banane
  • Citron

J’ai volontairement rajouté une couleur de fond sur les éléments « li » afin que vous voyez bien la différence entre une position « inside » et « outside ».

Voyons un autre exemple, avec la position « outside ».

CSS

ul li{
list-style-type: square; /* style de la puce */
list-style-position : outside; /* position de la puce */
}

Résultat

  • Pomme
  • Banane
  • Citron

Voyons un autre exemple, avec une puce « circle ».

CSS

ul li{
list-style-type: circle; /* style de la puce */
list-style-position : outside; /* position de la puce */
}

Résultat

  • Pomme
  • Banane
  • Citron

Vous voyez, ce n’est vraiment pas compliqué de jouer avec ces propriétés.

Combien de types de puce existe-t-il ?

Pour connaître les valeurs possibles de « type » de puce, vous pouvez consulter la liste complète des propriétés CSS sur le site du Zéro.

Pour ceux qui veulent avoir une vue d’ensemble en format A4, voici deux documents à télécharger. Ils datent de 2010, donc ne sont pas tout-à-fait à jour, mais c’est amplement suffisant pour commencer.

  • Les propriétés CSS 2 (en anglais)
  • Les propriétés CSS 3 (en anglais)

Enfin, la solution la plus pratique quand on manipule souvent CSS : les fameux Mémento de Raphaël Goetter (encore lui). Ces livrets sont l’équivalent d’un format A4 plié en 4 dans la longueur pour donner un « triptyque à 4 volets », et coûtent moins de 5€ chacun.

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons