Mise en forme des listes en CSS

Les listes permettent de définir des ... listes ... (Whouaouuuu  trop fort ). Il existe différents types de listes dont les listes dit "ordonnées", les listes non ordonnées, les listes imbriquées, etc...
Nous allons voir ici et sans être exhaustif comment utiliser ces différents types de listes.

Voici à quoi ressemble une liste :

<ul>
    <li>Lien 0</li>
    <li>Lien 1</li>
</ul>

Cette liste de type non ordonnée nous donnera donc le résultat suivant :

• Lien 0
• Lien 1

Quelle est la différence entre une liste ordonnée et une liste non ordonnée?

Une liste ordonnée est une liste qui utilise un ordre bien précis (selon le degré d'importance que vous lui donné) et qui peut être alphabétique ou numérique. En XHTML on utilisera donc l'élément <ol> </ol> pour une liste de type ordonnée et l'élément <ul> </ul> pour une liste de type non ordonnée.

Voici un exemple d'une liste ordonnée :

<ol class="decimal">
<li>Lien 0</li>
<li>Lien 1</li>
</ol>

Pour cette exemple, nous voulons afficher une liste numérotée. Pour ce faire, nous devons utiliser une class CSS qui sera la suivante :

.decimal {
list-style-type :decimal;
}

Le résultat sera le suivant :

1. Lien 0
2. Lien 1

Nous obtenons bien notre liste numérotée ...

Comme nous venons de le voir, la liste "réagie" en fonction de la class CSS qui lui est attribué et il en va de même pour n'importe quelle liste.

Propriétée list-style-type

Liste de type upper-roman

.upper-roman {
list-style-type :upper-roman;
}

<ol class="upper-roman">
<li>Lien 0</li>
<li>Lien 1</li>
</ol>

1. Lien 0
2. Lien 1

Liste de type upper-latin

.upper-latin {
list-style-type :upper-latin;
}

<ol class="upper-latin">
<li>Lien 0</li>
<li>Lien 1</li>
</ol>

1. Lien 0
2. Lien 1

Liste de type circle

.circle {
list-style-type :circle;
}

<ul class="circle">
<li>Lien 0</li>
<li>Lien 1</li>
</ul>

• Lien 0
• Lien 1

Liste de type square

.square {
list-style-type :square;
} 

<ul class="square">
<li>Lien 0</li>
<li>Lien 1</li>
</ul>

• Lien 0
• Lien 1

Liste de type armenian

.armenian {
list-style-type :armenian;
}

<ol class="armenian">
<li>Lien 0</li>
<li>Lien 1</li>
</ol>

1. Lien 0
2. Lien 1

Liste de type decimal

decimal {
list-style-type :decimal;
}

<ol class="decimal">
<li>Lien 0</li>
<li>Lien 1</li>
</ol>

1. Lien 0
2. Lien 1

Liste de type decimal-leading-zero

.decimal-leading-zero {
list-style-type :decimal-leading-zero;
}

<ol class="decimal-leading-zero">
<li>Lien 0</li>
<li>Lien 1</li>
</ol>

1. Lien 0
2. Lien 1

Liste de type disc

.disc {
list-style-type :disc;
}

<ul class="disc">
<li>Lien 0</li>
<li>Lien 1</li>
</ul>

• Lien 0
• Lien 1

Liste de type georgian

.georgian {
list-style-type :georgian;
}

<ol class="georgian">
<li>Lien 0</li>
<li>Lien 1</li>
</ol>

1. Lien 0
2. Lien 1

Liste de type lower-greek

.lower-greek {
list-style-type :lower-greek;
}

<ol class="lower-greek">
<li>Lien 0</li>
<li>Lien 1</li>
</ol>

1. Lien 0
2. Lien 1

Liste de type lower-latin

.lower-latin {
list-style-type :lower-latin;
}

<ol class="lower-latin">
<li>Lien 0</li>
<li>Lien 1</li>
</ol>

1. Lien 0
2. Lien 1

Liste de type lower-roman

<ol class="lower-roman">
<li>Lien 0</li>
<li>Lien 1</li>
</ol>

.lower-roman {
list-style-type :lower-roman;
}

1. Lien 0
2. Lien 1

Propriétée list-style-image et list-style-position

Liste de type list-style-image

liste-image {
list-style-image :url('fleche.gif');
}

<ul class="liste-image">
<li>Lien 0</li>
<li>Lien 1</li>
</ul>

• Lien 0
• Lien 1

Liste de type list-style-image en position inside

.liste-image-inside {
list-style-image :url('fleche.gif');
list-style-position :inside;
}

<ul class="liste-image-inside">
<li>Lien 0</li>
<li>Lien 1</li>
</ul>

• Lien 0
• Lien 1

Liste de type list-style-image en position outside

.liste-image-outside {
list-style-image :url('fleche.gif');
list-style-position :outside;
}

<ul class="liste-image-outside">
<li>Lien 0</li>
<li>Lien 1</li>
</ul>

• Lien 0
• Lien 1

Listes imbriquées

Listes imbriquées

<ul>
    <li>Accueil</a></li>
      <li>Créer un site
        <ul>
	    <li>Conception de sites web</li>
	    <li>Hébergement</li>
	    <li>Design</li>
	 </ul>
      </li>
	 <li>Css
	   <ul>
	     <li>Feuille de style</li>
	     <li>Liste à puces</li>
	   </ul>
      </li>
</ul>

Propriétée inherit

Inherit signifit "héritage", c'est à dire que le style sera celui défini par le block parent (celui qui le contient). Si il 'y en a pas, il prendra la valeur par défaut.

.inherit {
list-style-type :inherit;
}

Comme vous le savez, en (X)HTML, chaque élément peut en contenir d'autres. Ce qui signifie qu'un élément peut être contenu dans un autre. Inherit signifie que la valeur de la propriété héritera de la valeur de l'élément parent.

Propriétée none

La propriétée none signifie "aucune". En gros, une propriétée CSS comportant cette élément ne sera pas affecté par la class css du bloc parent.

.none {
list-style-type :none;
}

Créer un menu verticale grâce au CSS et aux listes

Sans aucunes prétentions, nous allons voir rapidement comment créer un menu verticale en utilisant d'une part le CSS et d'autre part, l'utilisation d'une liste.

#cadre {
border: 1px solid #000;
margin: 5px;
width: 150px;
padding: 5px;
}
ul {
list-style-type : none;
padding : 0px;
}
#cadre li a {
text-decoration : none;
background :#D5F4FF;
color : #000;
display: block;
}
#cadre li a:hover {
text-decoration : none;
background :red;
color : #000;
}

<div id="cadre">
<ul>
 
  <li><a href="#">Lien 0</a></li>
 
  <li><a href="#">Lien 1</a></li>
 
  <li><a href="#">Lien 2</a></li>
 
  <li><a href="#">Lien 3</a></li>
 
</ul>
 
</div>

Créer un menu horizontale grâce au CSS et aux listes

Voyons maintenant comment créer un menu horizontale grâce au CSS et à l'utilisation d'une liste.

#cadre-demo2 {
border: 1px solid #000;
margin: 5px;
width: 450px;
padding: 5px;
}
ul {
list-style-type : none;
padding : 0px;
}
#cadre-demo2 li{
display: inline;
}
#cadre-demo2 li a {
text-decoration : none;
background :#D5F4FF;
color : #000;
padding: 5px;
margin: 5px;
border: 1px solid #000;
}
#cadre-demo2 li a:hover {
text-decoration : none;
background :red;
color : #000;
}

<div id="cadre-demo2">
<ul>
 
  <li><a href="#">Lien 0</a></li>
 
  <li><a href="#">Lien 1</a></li>
 
  <li><a href="#">Lien 2</a></li>
 
  <li><a href="#">Lien 3</a></li>
 
</ul>
</div>

Dans cette exemple, nous attribuons à l'élément <li> la class css display: inline; qui permet de mettre horizontalement la liste.

Catégorie CSS