Les listes ordonnées / à puce en Css - FAQ CSS

Vous pouvez en feuille de style Css spécifier une image à la place d'une puce ou du marqueur d'item. Pour cela vous devez utiliser la feuille de style css list-style-image qui permet de spécifier l'url de l'image qui va servir de marqueur d'item.

list-style-image : url(img/background.gif);

Voir un exemple de puces en image en Css

Vous pouvez en feuille de style Css spécifier le type d'item (puce/lettre/chiffre). Pour cela vous devez utiliser la feuille de style Css list-style-type qui permet de spécifier le type d'item à afficher.
Par exemple, dans le cas d'une liste ordonnée OL vous voulez changer les chiffres par des lettres :

list-style-type : lower-alpha;

list-style-type : square;

Grâce à la propriété Css list-style-type une liste ordonnée peut devenir une liste non ordonnée et vis versa ou vous pouvez aussi supprimer carrément la puce.
Voir des exemples de changement de type de puce en Css

Par défaut lorsque le texte retourne à la ligne, il se place au même niveau que le début de la première ligne.
La feuille de style Css list-style-position permet de changer ce fonctionnement pour que le texte qui passe à la ligne, se place au même niveau que le début de la puce.
Voir un exemple des positions possible du texte par rapport à la puce

list-style-position : outside;

Si vous désirez que la couleur de la puce soit différente de la couleur du texte, vous pouvez en feuille de style Css spécifier une couleur pour le OL/UL ou LI et mettre le texte dans une balise ayant une autre couleur.

<style>
ol{
  /* L'ensemble des marqueurs d'item  */
  color : #CC0000
}
ol li.red-color{ 
  /* un marqueur d'item LI */
  color : red
}
ol span{
  color : #000;
}
</style>
<ol>
  <li><span>Titre 1.1</span></li>
  <li class="red-color"><span>Titre 1.2</span></li>
  <li><span>Titre 1.2</span></li>
</ol>

Dans le cas où vous transformez des éléments via display, vous devrez faire votre propre incrémentation pour que les "puces" aient une autre couleur.

Rendre compatible la puce de couleur pour IE 10

Vous pouvez en feuille de style Css transformer presque toutes les balises HTML ou XHTML en un élément item (LI). Pour cela, vous devez utiliser la feuille de style Css display qui permet de spécifier que l'élément est maintenant un type d'item.

display : list-item;

<style>
  center{ display : list-item }
</style>
<center>devient un élément liste</center>

Dans le cas, d'une liste ordonnée, tous les enfants ayant le même parent seront pris dans l'incrémentation de la "puce". Le parent fait office de balise OL ou UL.
Cependant à ce jour (04-2016) un bug d'incrémentation Firefox, vous empêchera de faire des listes ordonnées. La seule solution sera de faire votre propre incrémentation.

Vous pouvez en feuille de style Css transformer une liste en un élément autre. Le cas le plus utilisé, consiste à transformer les LI en éléments côte à côte pour en faire un menu.
La première chose à faire est de faire un "reset" des puces et de marges.

ol,ol li{
  margin : 0;
  padding : 0;
  list-style : none;
}
/* ou */
ul,ul li{
  margin : 0;
  padding : 0;
  list-style : none;
}

En suite, vous devez redéfinir le type des LI avec la propriété display.

ol li,ul li{
  display : inline-block;
}

<style type="text/css">
.list-to-linline, .list-to-linline li{
  margin : 0;
  padding : 0;
  list-style : none;
}
.list-to-linline li{
  display : inline-block
}
</style>
<ul class="list-to-linline">
<li>élément</li>
<li>élément</li>
<li>élément</li>
<li>élément</li>
</ul>

Exemple de redéfinition du type d'un LI en CSS :

• élément
• élément
• élément
• élément

• élément
• élément
• élément
• élément

Exemple de changement de type d'un LI, pas à pas

Vous pouvez en feuille de style Css gérer votre propre incrémentation et personnaliser le texte de l'item (exp : "Chap. 1) mon item"). Pour cela vous devez utiliser la feuille de style Css counter-reset, content et counter-increment.

<style type="text/css">
.initsection{
  counter-reset : section;
  padding-left : 40px;
}
.h3{ counter-reset : subsection; }
.h3:before{
  content : counter(section, decimal) ") "; 
  counter-increment : section; 
}

.h4:before{
  content : counter(section, decimal) "-" counter(subsection, decimal) ". "; 
  counter-increment : subsection; 
}
</style>
<div class="initsection">
<h3 class="h3">Titre 1</h3>
<h4 class="h4">Titre 1.1</h4>
<h4 class="h4">Titre 1.2</h4>
<h3 class="h3">Titre 2 </h3>
<h4 class="h4">Titre 2.1</h4>
<h4 class="h4">Titre 2.2</h4>
</div>

Exemple d'incrémentation personnalisée :

Vous pouvez modifier l'espace entre le marqueur d'item et le texte de l'item. Pour cela, vous devez utiliser la feuille de style css padding-left sur l'item (LI). Cette technique ne fonctionne que si list-style-position à outside.
Par défaut, l'espace est de 40px, mais cela peut varier suivant le navigateur.

ol li{
  padding-left: 60px;
  list-style-position : outside;
}

Exemple de modification de l'espace entre marqueur d'item et le texte :

• Sans changement
• Mon texte
  Retour de texte
• Mon texte

• Avec padding
• Mon texte
  Retour de texte
• Mon texte

• Avec padding
  list-style-position: inside
• Mon texte
  Retour de texte
• Mon texte

Vous pouvez modifier l'espace le marqueur d'item et le côté gauche de la liste OL, UL. Pour cela, vous devez utiliser la feuille de style Css padding-left de la liste OL, UL et mettre la propriété Css margin à 0.
Sachez aussi que sur d'anciens navigateurs, Ie6 ou IE7 par exemple utilisaient pour le décalage margin-left.
Par défaut, l'espace est de 40px, mais cela peut varier suivant le navigateur.

ol, ul{
  padding : 0 0 0 60px;
  margin : 0;
}
ul li,
ol li{
  padding : 0;
  margin : 0;
}

Exemple de modification de l'espace entre marqueur d'item et le côté de la liste :

• Sans changement
• Mon texte
  Retour de texte
• Mon texte

• Avec padding
• Mon texte
  Retour de texte
• Mon texte

• Avec padding
• Mon texte
  Retour de texte
• Mon texte

Vous pouvez center horizontalement une liste. Pour cela, vous devez utiliser changer les types de la liste OL ou UL en utilisant la feuille de style Css display:inline-block et mettre sur son parent un text-align:center.

ul{
  display : inline-block;
  margin :auto;
  text-align:left;
}

Exemple de centrage horizontal d'une liste :
Alignement de OL / UL par défaut.

Autres techniques pour centrer une liste