» Menu verticale avec calque » Menu vertical trois niveaux » Le corps » Le pied de page » Les titres » Les paragraphes » Les liens » Les listes.

Les listes.

Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.

imprimer le tutoriel

Résumé de la matière Description
Une liste simple non triée. Rares sont les sites ne faisant pas appel à au moins une liste...
Une liste simple triée. Pour une liste triée, utiliser la balise <ol>...
Liste et sous liste. Un élément liste peut aussi contenir sa propre liste...
Les puces. Grâce au CSS, attribuer des calques à la liste au lieu des puces...

«

»

Les listes.

Comme nous l'avons vu précédemment, l'utilisation d'une liste permet une grande souplesse dans la création de menu, mais là ne s'arrête pas leur utilité. En effet, rare sont les sites ne faisant pas appel à au moins une liste.

Une liste est imbriquée entre deux balises, <ul> (unordered list ang. - liste non triée fr.) ou <ol> (ordered list ang. - liste triée fr.). Les éléments de la liste seront précédés d'une puce (un point noir ou d'un numéro par défaut).

Exemple d'une liste non triée :

Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).


1
2
3
4
5
6
7
  

<ul>
 <li>Iteme de la liste.</li>
 <li>Iteme de la liste. </li>
 <li>Iteme de la liste.</li>
 <li>Iteme de la liste.</li>
 <li>Iteme de la liste.</li>
</ul>

Résultat attendu :

 

Pour une liste triée, utiliser la balise <ol>.

Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).


1
2
3
4
5
6
7
  

<ol>
 <li>Iteme de la liste.</li>
 <li>Iteme de la liste. </li>
 <li>Iteme de la liste.</li>
 <li>Iteme de la liste.</li>
 <li>Iteme de la liste.</li>
</ol>

Résultat attendu :

  1. Iteme de la liste.
  2. Iteme de la liste.
  3. Iteme de la liste.
  4. Iteme de la liste.
  5. Iteme de la liste.

Un élément liste peut aussi contenir sa propre liste. Dans ce cas, les puces noires sont remplacées par des cercles.

Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).


1
2
3
4
5
6
7
8
9
10
  

<ul>
 <li>Iteme de la liste.</li>
 <li>Iteme de la liste.
  <ul>
   <li>Iteme de la liste.</li>
   <li>Iteme de la liste.</li>
  </ul>
 </li>
 <li>Iteme de la liste.</li>
</ul>

Résultat attendu :


Vous pouvez, grâce au CSS, attribuer des calques à la liste au lieu des puces.

Pour toute la liste :


1
2
3
  

ul.puce{
list-style-image:url(../images/icones/arrow.png)
}

Résultat attendu :

 

Pour la sous liste seulement :


1
2
3
  

.puce ul{
list-style-image:url(../images/icones/arrow.png)
}

Résultat attendu :

 

Sans puce pour la première liste, mais avec puce pour la sous liste seulement.

Dans le XHTML :


1
2
3
4
5
6
7
8
9
10
  

<ul class="nopuce">
 <li>Iteme de la liste.</li>
 <li>Iteme de la liste.
   <ul class="puce-niveau">
    <li>Iteme de la liste.</li>
    <li>Iteme de la liste.</li>
   </ul>
 </li>
 <li>Iteme de la liste.</li>
</ul>

Dans le CSS :


1
2
3
4
5
6
7
  

.nopuce ul{
list-style:none
}

ul.puce-niveau{
list-style-image:url(../images/icones/arrow.png)
}

Résultat attendu :

 

Pour une liste sans puce ainsi imbriquée, vous devrez au préalable créer une classe. 


1
2
3
4
5
6
7
8
9
10
  

<ul class="nopuce">
 <li>Iteme de la liste.</li>
 <li>Iteme de la liste.
  <ul>
   <li>Iteme de la liste.</li>
   <li>Iteme de la liste.</li>
  </ul>
 </li>
 <li>Iteme de la liste.</li>
</ul>

Dans le CSS :


1
2
3
4
5
6
7
  

.nopuce ul{
list-style:none
}

.nopuce{
list-style:none
}

Résultat attendu :

 

«

»

LE CONCEPTEUR DE SITE WEB.com

Pour un site professionnel

Téléphone 514 363-4169
Courriel serge@leconcepteur.ca