CSS > Les listes

Les propriétés CSS dédiées aux listes permettent de choisir le type de marqueur (puce, numérotation) à utiliser pour chaque élément parmis ceux offerts par défaut pour les listes ordonnées et non ordonnées.

Il est également possible d'utiliser votre propre image en tant que puce.

Cliquez sur les exemples de code CSS pour voir le résultat appliqué à la colonne de droite ou l'un de ses éléments contenus.

list-style-type : type de puce ou type de numérotation

Type de puce pour les listes non ordonnées :

list-style-type: none;
list-style-type: disc;
list-style-type: circle;
list-style-type: square;

Type de numérotation pour les listes ordonnées :

list-style-type: none;
list-style-type: armenian;
list-style-type: decimal;
list-style-type: decimal-leading-zero;
list-style-type: georgian;
list-style-type: lower-alpha;
list-style-type: lower-greek;
list-style-type: lower-latin;
list-style-type: lower-roman;
list-style-type: upper-alpha;
list-style-type: upper-latin;
list-style-type: upper-roman;

Valeurs possibles	none, disc, circle, square, armenian, decimal, decimal-leading-zero, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman, inherit
Valeur héritée	oui
Valeur par défaut	disc
Compatibilité navigateurs	Voir www.quirksmode.org

Remarque : il existe d'autres types de puce ou numéroration mais ces dernières sont mal supportées par les navigateurs (binary, box, ...) : voir http://www.quirksmode.org/css/lists.html

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

list-style-position : modifier la position du marqueur

list-style-position: outside;
list-style-type: lower-roman;
list-style-position: inside;
list-style-type: lower-roman;

Valeurs possibles	inside, outside, inherit
Valeur héritée	oui
Valeur par défaut	outside
Compatibilité navigateurs	Voir www.quirksmode.org

Item 1 :
Hae duae provinciae bello quondam piratico.
Item 2 : Hae duae provinciae bello quondam piratico catervis mixtae.
Item 3
Item 4

list-style-image : utiliser une image

list-style-image: url('images/css-green-arrow-ul.png')

Valeurs possibles	url('URL'), none, inherit
Valeur héritée	oui
Valeur par défaut	none
Compatibilité navigateurs	Voir www.quirksmode.org

Malheureusement l'image n'est pas affichée exactement de la même manière par tous les navigateurs (petit décalage vers le haut, ...). Voici une solution qui fonctionne pour tous les navigateurs, mais qui utilise une image d'arrière plan plutôt que la propriété list-style-image :

<style type="text/css">
ul#ul1 {
 /* suppr puce et marges */
 list-style-type: none;
 padding: 0px;
 margin: 0px;
}
ul#ul1 li {
 /* puce en arrière plan */
 background: url('images/css-green-arrow-ul.png')
             no-repeat
             0px 0px;
 padding-left: 20px;
}
</style>

<ul id="ul1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Item 1
Item 2
Item 3
Item 4

list-style : combiner toutes les propriétés

La propriété list-style permet de rassembler en une seule instruction CSS toutes les propriétés vues précédemment dans l'ordre suivant :

list-style-type
list-style-position
list-style-image

Exemples :

list-style: disc inside url('images/css-green-arrow-ul.png');

list-style: georgian outside;

Item 1
Item 2
Item 3
Item 4

Place à la pratique :

Exemples : list-style-type, list-style-position, list-style-image

<style type="text/css">
#ulexo1 {
  list-style-type: square;
}

#olexo1 {
  list-style-type: lower-roman;
}
</style>

<ul id="ulexo1">
  <li>Item 1</li>
  <li>Item 2 :
      <ol id="olexo1">
        <li>Item 2.1</li>
        <li>Item 2.2</li>
        <li>Item 2.3</li>
      </ol>
  </li>
  <li>Item 3</li>
</ul>

<style type="text/css">
#ulexo2 {
  list-style-type: square;
  list-style-position: outside;
}

#olexo2 {
  list-style-type: lower-roman;
  list-style-position: inside;
}
</style>

<ul id="ulexo2">
  <li>Item 1</li>
  <li>Item 2 :
      <ol id="olexo2">
        <li>Item 2.1</li>
        <li>Item 2.2</li>
        <li>Item 2.3</li>
      </ol>
  </li>
  <li>Item 3</li>
</ul>

<style type="text/css">
ul#ulexo3 {
  list-style-image: url('images/css-green-arrow-ul.png');
}

ol#olexo3 {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
ol#olexo3 li {
  background: url('images/css-green-arrow-ul.png') no-repeat 0px 0px;
  padding-left: 20px;
}
</style>

<ul id="ulexo3">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ol id="olexo3">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

THIS CONTENT WILL BE REPLACED BY INTERPRETED HTML TAPED IN THE "code" TEXTAREA