FAQ CSS : Les listes ordonnées / à puce

Page d'introduction

Introduction

Que vais je trouver?

Vous trouverez diverses questions sur les feuilles de style css pour la présentation des listes ordonnées (ol) et à puce (li).

Mettre une image à la place des puces

Explication

Vous pouvez en feuille de style css spécifier une image à la place d'une puce ou 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 puce.
Exemple de code :
list-style-image:url(images/background.gif)
;


Spécifier l'item d'une liste

Explication

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.
Exemple de code :
list-style-type:lower-alpha;


Gérer le décalage du texte par rapport à l'item

Explication

Vous pouvez en feuille de style css spécifier lorsque le texte retourne à la ligne sa position par rapport à l'item. Pour cela vous devez utiliser la feuille de style css list-style-position qui permet de spécifier le type d'item à afficher.
Exemple de code :
list-style-position:outside;


Tranformer un élément en liste

Explication

Vous pouvez en feuille de style css transformer presque toutes les balises HTML ou XHTML en un élément de liste. Pour cela vous devez utiliser la feuille de style css display qui permet de spécifier le type d'item à afficher.
Exemple de code :
display:list-item;

Script CSS :
Exemple de code :
<style>
  center{display:list-item}
</style>
Code HTML ou XHTML:
Exemple de code :
<center>devient un élément liste</center>


L'item de couleur différente du texte

Définition

Vous pouvez en feuille de style css avoir une couleur de l'item différent de l'énoncé.
Exemple de code :
ol{
  color:#CC0000
}
span{
  color:#000;
}
<ol>
  <li><span>Titre 1.1</span></li>
  <li>Titre 1.2</li>
</ol>




La balise HTML et XHTML OL contient tous les éléments de la liste ordonnée.<OL> </OL>Chaque élément de la liste est précédé par la balise HTML et XHTM...[Voir]La balise HTML et XHTML LI correspond à une ligne d'une liste non ordonnée ou ordonnée.<LI> Exemple : Non ordonnée :<UL> <LI>Liste 1 <LI>Liste 2 </U...[Voir]La propriété de feuille de style COLOR css permet de spécifier la couleur d'un texte..identifiant{ color:#ffffff; } La propriété de feuille de style...[Voir]La propriété de feuille de style css LIST-STYLE-IMAGE permet de mettre une image à la place de l'item ou puce.identifiant{ list-style-image: URL(../i...[Voir]La propriété de feuille de style css LIST-STYLE-POSITION permet de spécifier l'alignement gauche du texte par rapport à l'item ou puce lors d'un retou...[Voir]La propriété de feuille de style css LIST-STYLE-TYPE permet de spécifier le type de la liste, si la liste est ordonnée ou si la liste est non ordonnée...[Voir]La propriété de feuille de style css DISPLAY permet de spécifier la manière dont un élément est affiché.identifiant{ display:block; } La propriétéde ...[Voir]