Accueil Recherche | Plan Technique | Liens | Actualités | Formation | Emploi | Forums | Base
dossier cerig.efpg.inpg.fr 
Vous êtes ici : Accueil > La technique > Internet et le Web > Les feuilles de style > Les listes           Révision : 23 mai 2004
Pas de page précédente Les feuilles de style Page suivante
Page précédente   Page suivante  
Jean-Claude SOHM - CERIG / EFPG
(23 mai 2004)

X - Les listes

X-01- Introduction

Les listes sont utilisées depuis fort longtemps pour structurer les documents imprimés. Lorsque le Web s'est développé, elles ont été rapidement introduites dans le HTML. Rompre la monotonie du texte (par des listes, des images, etc.) est en effet plus important encore pour l'affiché que pour l'imprimé.

Les feuilles de style n'ont pas révolutionné l'utilisation des listes dans les pages Web, mais elles ont apporté les avantages liés à la notion de boîte -- la gestion des marges et celle de la couleur de fond en particulier. En matière de style, on distingue deux types de listes :

Dans ce chapitre, nous commencerons par un rappel sur le traitement des listes en HTML. Puis nous nous attacherons à montrer les avantages (et les inconvénients...) des feuilles de style dans la gestion des listes.

 

X-02- Les listes en HTML

Le HTML gère trois types de listes : les listes de définitions, les listes numérotées et les listes à puce. Deux autres listes existaient dans les versions antérieures du HTML (listes de menu et listes de répertoire), mais elles ne sont pas utilisées (quand ils les rencontrent, les navigateurs les affichent comme des listes à puce).

La gestion des listes par le HTML est assez spartiate, comme le montre le tableau suivant :

La liste de définitions. Chaque élément d'une liste de ce type est composé de deux parties : le terme et sa définition. En HTML, le code correspondant s'écrit comme le montre le tableau ci-dessous (comme il est d'usage dans un dictionnaire, nous avons écrit le terme en gras) :

<div style="margin: 10px 1px 0 1px"><img border="0" src="images/noir.gif" width="100%" height="1"></div>
<dl>
<dt><b>Premier terme</b></dt>
<dd>Première définition</dd>
<dt><b>Deuxième terme</b>/dt>
<dd>Deuxième définition</dd>
</dl>
<div style="margin: 0 1px 10px 1px"><img border="0" src="images/noir.gif" width="100%" height="1"></div>

Le code précédent s'affiche ainsi (nous avons entouré la liste de deux traits noirs, de manière à faire apparaître les sauts de ligne) :

Premier terme
Première définition
Deuxième terme
Deuxième définition

Qu'il s'agisse d'Internet Explorer ou d'un navigateur à moteur Gecko, le résultat est le même :

Le langage HTML ne nous permet pas de modifier ces propriétés, les trois balises relatives à la liste de définition ne possèdent pas d'attribut. Pour faire mieux sans recourir à un style, on peut utiliser un tableau invisible pour régler marges et interlignes.

La liste numérotée. Pour créer une liste numérotée, le HTML utilise les balises OL et LI. Deux options nous sont offertes :

Ces deux attributs s'appliquent à la balise OL. Voici un exemple de code HTML traduisant une liste numérotée :

<div style="margin: 10px 1px 0 1px"><img border="0" src="images/noir.gif" width="100%" height="1"></div>
<ol type="I" start="3">
<li>Mars</li>
<li>Avril</li>
</ol>
<div style="margin: 0 1px 10px 1px"><img border="0" src="images/noir.gif" width="100%" height="1"></div>

Comme le montre l'affichage ci-dessous, le concepteur n'est maître ni des marges (en haut, à gauche et en bas), ni de la distance entre la numérotation et le texte, ni de l'interlignage :

  1. Mars
  2. Avril

Comme précédemment, le concepteur peut utiliser un tableau invisible pour régler ces divers paramètres à sa convenance.

La liste à puce. Pour créer une liste à puces, le HTML utilise les balises UL et LI. Appliqué à la balise UL, l'attribut TYPE permet de changer de puce, et nous offre trois possibilités :

Exemple de code HTML :

<div style="margin: 10px 1px 0 1px"><img border="0" src="images/noir.gif" width="100%" height="1"></div>
<ul type="circle">
<li>Premier élément</li>
<li>Second élément</li>
</ul>
<div style="margin: 0 1px 10px 1px"><img border="0" src="images/noir.gif" width="100%" height="1"></div>

Comme le montre l'affichage ci-dessous, le concepteur n'est maître ni des marges (en haut, en bas et à gauche), ni de la distance puce texte, ni de l'interlignage :

  • Premier élément
  • Second élément

Comme précédemment, le concepteur peut remédier à cette situation en utilisant un tableau invisible. Il doit alors traiter la puce comme une image, ce qui nous amène au point suivant.

La puce graphique. Le HTML ne prévoit pas que le concepteur puisse utiliser comme puce une image de son choix -- image que l'on appelle la "puce graphique". En l'absence de style, le recours à un tableau invisible est donc indispensable. Un exemple de code figure ci-dessous :

<table cellspacing="0" cellpadding="1" border="0" width="100%">
<tr>
<td rowspan="2"><img border="0" src="images/vide.gif" width="52" height="1"></td>
<td valign="top" nowrap><img border="0" src="images/pucecare.gif" width="6" height="6">&nbsp;&nbsp;</td>
<td bgcolor="#F6F6FF" width="100%">Premier élément,<br>avec retour à la ligne</td>
<td rowspan="2"><img border="0" src="images/vide.gif" width="19" height="1"></td>
</tr>
<tr>
<td  valign="top"><img border="0" src="../images/pucecare.gif" width="6" height="6">&nbsp;</td>
<td bgcolor="#F6F6FF">Second élément, sans retour à la ligne</td>
</tr>
</table>

Le tableau invisible utilisé dans cet exemple comporte quatre colonnes :

L'interlignage est réglé via la marge interne des cellules. Le résultat obtenu figure ci-dessous :

   Premier élément,
avec retour à la ligne
  Second élément, sans retour à la ligne

 

X-03- La liste de définition via les styles

Les trois balises correspondantes (DL, DD et DT) peuvent être dotées de toutes les propriétés des boîtes (cadre, marges, fond, typographie), comme le montrent le code et la figure ci-dessous. Pour faire apparaître la marge externe de la boîte DL, nous avons entouré la liste de deux traits noirs. On notera que les boîtes DT et DL se succèdent, mais qu'elles sont emboîtées dans la boîte DL.

<div style="margin: 10px 3px 0 3px"><img border="0" src="images/noir.gif" width="100%" height="1"></div>
<dl style="margin: 10px; border: 5px aqua double; padding: 6px; background: #FFFFDD; width: 220px">
<dt style="margin: 6px 0 6px 6px; border: 1px teal solid; padding: 6px; background: white">Premier terme</dt>
<dd style="margin: 6px 0 12px 25px; border: 2px dotted purple; padding: 6px; background: #EEEEEE">Première définition</dd>
<dt style="margin: 6px 0 6px 6px; border: 1px teal solid; padding: 6px; background: white">Deuxième terme</dt>
<dd style="margin: 6px 0 6px 25px; border: 2px dotted purple; padding: 6px; background: #EEEEEE">Deuxième définition</dd>
</dl>
<div style="margin: 0 3px 10px 3px"><img border="0" src="images/noir.gif" width="100%" height="1"></div>
Premier terme
Première définition
Deuxième terme
Deuxième définition

Nous obtenons pratiquement le même affichage dans IE et dans les navigateurs à moteur Gecko. Comme nous pouvons le constater, tous les paramètres relatifs à la présentation de la liste de définitions deviennent réglables, ce qui change agréablement du HTML. Il faut cependant faire attention au phénomène de fusion des marges verticales, que nous étudierons de plus près dans le paragraphe suivant.

 

X-04- La fusion des marges

Nous avons déjà rencontré ce phénomène :

Nous retrouvons donc le phénomène de fusion entre boîtes DT et DD, comme le montre la figure ci-dessous. Ce qui nous surprend, par contre, c'est la fusion de la marge verticale interne haute de la boîte DL avec la marge verticale externe haute de la première boîte DT. Le phénomène est propre à IE et ne se produit pas dans les navigateurs à moteur Gecko.

Ainsi, le code suivant :

<dl style="border: 1px black solid; padding: 30px; background: #FFFFDD; width: 250px">
<dt style="margin: 25px 0; border: 1px black solid; padding: 3px; background: white">Premier terme</dt>
<dd style="margin: 20px 0 40px 20px; border: 1px black solid; padding: 3px; background: #EEEEEE">Première définition</dd>
<dt style="margin: 25px 0; border: 1px black solid; padding: 3px; background: white">Deuxième terme</dt>
<dd style="margin: 20px 0 40px 20px; border: 1px black solid; padding: 3px; background: #EEEEEE">Deuxième définition</dd>
</dl>

conduit aux affichages suivants (sur PC) :

 
     
 
 
     
 
IE6/PC moteur Gecko/PC

X-05- La liste à marqueur via les styles

Pour traiter les listes à marqueur le W3C a introduit la notion de décoration dans la recommandation CSS2. Une décoration est un contenu qui se trouve stocké dans une feuille de style, et que l'on peut introduire où l'on veut dans un document. La décoration peut être de nature textuelle ou graphique. Dans le cas particulier d'une liste, la marqueur est traité comme une décoration.

Pour gérer les décorations, la recommandation CSS2 a prévu :

Dans le cas particulier d'une liste, ces outils devraient être utilisés ainsi :

En pratique, rien de tout cela n'est implémenté dans Internet Explorer. Il ne reste à la disposition du concepteur que trois propriétés prévues dans la recommandation CSS1 (issues de la rubrique "5.6-Propriétés de classification") :

A cela s'ajoute le fait que les balises utilisées pour créer des listes à marqueur (OL, UL et LI) sont dotées de toutes les propriétés des boîtes de type "bloc" (marges, cadre, fond et typographie).

Il est important de remarquer que le concepteur n'est pas maître de la position du marqueur par rapport au texte (de ce point de vue, les feuilles de style ne font pas mieux que le HTML). Cela soulève deux questions :

 

X-06- La propriété LIST-STYLE-TYPE

Suivant la valeur qu'on lui attribue, la propriété LIST-TYPE-TYPE permet de définir le marqueur soit comme une numérotation, soit comme une puce standard, soit comme une liste sans marqueur.

Liste ordonnée. Dans ce cas, la propriété peut prendre les valeurs suivantes :

Liste à puce standard. Dans ce cas, la propriété peut prendre des valeurs identiques à celles déjà utilisées en HTML :

Liste sans marqueur. Dans ce cas, la propriété prend la valeur "none".

Remarque : il résulte de ce qui précède que l'on peut utiliser indifféremment la balise OL ou la balise UL pour créer une liste à marqueur. En pratique, il est conseillé de continuer à utiliser OL pour les listes numérotées, et UL pour les listes à puces. Ainsi, la liste continue à fonctionner si le navigateur de l'internaute n'interprète pas les feuilles de style (un cas de plus en plus rare), et le concepteur relit plus facilement son code (s'il se donne la peine de le faire).

Exemple de liste ordonnée. L'exemple ci-dessous illustre l'utilisation de la propriété LIST-STYLE-TYPE dans le cas d'une liste numérotée en chiffres romains majuscules. Comme la propriété COUNTER n'est pas utilisable, il faut continuer à utiliser l'attribut START du HTML pour initialiser la numérotation à la valeur voulue.

<div style="margin: 10px 3px 0 3px"><img border="0" src="../images/noir.gif" width="100%" height="1"></div>
<ol style="margin: 10px; padding: 5px; border: 4px double cyan; list-style-type: upper-roman; background-color: #FFD; width: 150px" start="3">
<li style="background-color: #EEE; padding: 3px; margin: 5px 5px 5px 25px; border: 2px dotted blue">Mars</li>
<li style="background-color: #EEE; padding: 3px; margin: 5px 5px 0 25px; border: 2px dotted blue">Avril</li>
</ol>
<div style="margin: 10px 3px 0 3px"><img border="0" src="../images/noir.gif" width="100%" height="1"></div>

On notera qu'il faut doter les boîtes LI d'une marge externe gauche suffisante (au moins 20 pixels), sinon la numérotation sort de la boîte OL et disparaît -- nous reviendrons plus loin sur ce point. Le code ci-dessus s'affiche ainsi :

  1. Mars
  2. Avril

Exemple de liste à puce standard. L'exemple ci-dessous illustre le cas où la puce est un cercle noir à l'intérieur transparent. Là encore, nous avons doté les boîtes LI d'une marge externe gauche suffisante pour que les puces ne sortent pas de la boîte UL.

<div style="margin: 10px 3px 0 3px"><img border="0" src="../images/noir.gif" width="100%" height="1"></div>
<ul style="margin: 10px; padding: 5px; border: 4px double cyan; list-style-type: circle; background-color: #FFD; width: 250px">
<li style="background-color: #EEE; padding: 3px; margin: 5px 5px 5px 25px; border: 2px dotted blue">Premier élément</li>
<li style="background-color: #EEE; padding: 3px; margin: 5px 5px 0 25px; border: 2px dotted blue">Second élément</li>
</ul>
<div style="margin: 10px 3px 0 3px"><img border="0" src="../images/noir.gif" width="100%" height="1"></div>

Ce code s'affiche ainsi :

  • Premier élément
  • Second élément
 

X-07- La propriété LIST-STYLE-IMAGE

La propriété LIST-STYLE-IMAGE permet de créer une liste à puce graphique, comme le montre le code ci-dessous. Nous avons de nouveau doté les boîtes LI d'une marge externe gauche suffisante pour que les puces graphiques ne sortent pas de la boîte UL.

<div style="margin: 10px 3px 0 3px"><img border="0" src="../images/noir.gif" width="100%" height="1"></div>
<ul style="margin: 10px; padding: 5px; border: 4px double cyan; list-style-image: url('images/pucecare.gif'); background-color: #FFD; width: 250px">
<li style="background-color: #EEE; padding: 3px; margin: 5px 5px 5px 25px; border: 2px dotted blue">Premier élément</li>
<li style="background-color: #EEE; padding: 3px; margin: 5px 5px 0 25px; border: 2px dotted blue">Second élément</li>
</ul>
<div style="margin: 10px 3px 0 3px"><img border="0" src="../images/noir.gif" width="100%" height="1"></div>

Cet exemple s'affiche ainsi dans Internet Explorer (version 6) et dans Mozilla (version 1.6) :

 
     
 
     
 
     
 
IE6/PC Mozilla1.6/PC

Nous constatons immédiatement qu'Internet Explorer place les puces graphiques trop haut ; nous verrons plus loin comment remédier à cette situation.

Remarque : si le navigateur ne trouve pas la puce graphique à l'adresse (URL) indiquée dans le style, il la remplace par une puce standard (le rond noir par défaut).

Pour étudier comment les navigateurs gèrent la position du marqueur, nous avons fait varier de 0 à 40 pixels, par échelons de 5 pixels, la marge externe gauche de la boîte LI d'une liste à puce. Le résultat est représenté ci-dessous pour NS 6 et Mozilla 1.6 sur PC.

 
     
 
     
 
     
 
     
 
     
 
IE6/PC Mozilla1.6/PC (padding-left par défaut) Mozilla1.6/PC (padding-left=0)

Nous voyons que les navigateurs assurent une distance constante entre le marqueur et le bord de la boîte LI correspondante (8 pixels). Le navigateur Mozilla rajoute 26 pixels à gauche du marqueur, ce qui évite à ce dernier de sortir de la boîte UL en cas de marge trop faible. Il s'agit là d'une valeur par défaut de la propriété PADDING-LEFT de la boîte UL. Si l'on précise "padding: 0" dans le style de cette boîte, la marge par défaut disparaît, et le positionnement est le même dans les deux navigateurs.

 

X-08- La propriété LIST-STYLE-POSITION

La propriété LIST-STYLE-POSITION peut prendre deux valeurs :"inside" et "outside" (valeur par défaut). La valeur "inside" implique que le texte de chaque élément de la liste coule autour du marqueur correspondant, comme le montre l'exemple suivant.

<ul style="margin: 10px; border: 4px double cyan; list-style-type: circle; list-style-position: inside; background-color: #FFD; width: 250px">
<li style="background-color: #EEE; padding: 3px; margin: 5px; border: 2px dotted blue">Texte assez long pour provoquer un retour à la ligne</li>
<li style="background-color: #EEE; padding: 3px; margin: 5px; border: 2px dotted blue">Texte court</li>
</ul>

On constate alors que le marqueur est intégré à la boîte LI :

  • Texte assez long pour provoquer un retour à la ligne
  • Texte court

X-09- Le raccourci LIST-STYLE

Il est possible de regrouper les valeurs des propriétés LIST-STYLE-TYPE, LIST-STYLE-IMAGE et LIST-STYLE-POSITION en utilisant le raccourci LIST-STYLE. Au code ci-dessous :

<ul style="margin: 10px; border: 4px double cyan; list-style: url('../images/pucecare.gif') inside; background-color: #FFD; width: 250px">
<li style="background-color: #EEE; padding: 3px; margin: 5px; border: 2px dotted blue">Texte assez long pour provoquer un retour à la ligne</li>
<li style="background-color: #EEE; padding: 3px; margin: 5px; border: 2px dotted blue">Texte court</li>
</ul>

correspond l'affichage suivant :

  • Texte assez long pour provoquer un retour à la ligne
  • Texte court

On constate que le navigateur de Microsoft fournit un affichage médiocre (la puce graphique est accolée au texte ; on peut y remédier en insérant quelques espaces au début de chaque élément de la liste). Le résultat est meilleur dans les navigateurs à moteur Gecko, qui introduisent une marge de 8 pixels entre la puce et le texte. Mais si le navigateur de Netscape fournit un affichage tout à fait satisfaisant, il n'en est pas de même pour Mozilla, qui n'affiche pas correctement les puces graphiques (il faut cliquer sur "Recharger la page actuelle" pour obtenir un affichage satisfaisant).

 

X-10- La gestion d'une liste avec un style

Face aux avantages et inconvénients que présente la gestion d'une liste à l'aide d'un style, trois positions sont possibles :

La première position est celle de la sécurité absolue.

La seconde position est illustrée par le code ci-dessous. Nous avons repris l'exemple de gestion des puces graphiques du paragraphe 2, et nous avons simplifié le tableau en le gérant le plus possible via un style.

<head>
<style>
table.A { margin: 0 25px 12px 54px }
td.B    { width: 25px; vertical-align: top }
td.C    { background-color: #F6F6FF }
</style>
</head>
 
<body>
<table class="A" cellspacing="1">
<tr>
<td class="B"><img border="0" src="images/pucecare.gif" width="6" height="6">&nbsp;</td>
<td class="C">Premier élément,<br>avec retour à la ligne</td>
</tr>
<tr>
<td class="B"><img border="0" src="../images/pucecare.gif" width="6" height="6">&nbsp;</td>
<td class="C">Second élément, sans retour à la ligne</td>
</tr>
</table>
</body>

C'est une solution prudente qui fonctionne bien avec la majorité des navigateurs, sauf les plus anciens (lesquels se font rares). Cette solution implique que le tableau se referme sur son contenu (comme on peut le constater ci-dessous), à moins que l'on n'attribue une largeur fixe aux cellules contenant les éléments de la liste.

  Premier élément,
avec retour à la ligne
  Second élément, sans retour à la ligne

Lors de l'utilisation des puces graphiques, la troisième position requiert que l'on règle le problème du positionnement de la puce dans IE, et de son affichage défectueux dans Mozilla (il faut recharger la page). Deux solutions peuvent être utilisées.

Première solution. Pour faire descendre la puce, on lui rajoute une zone transparente en partie supérieure. De même, pour l'écarter du texte, on lui rajoute une zone transparente à droite. C'est la solution qui a été adoptée pour les puces graphiques de ce dossier, lesquelles ont la structure suivante (la zone transparente est représentée sous forme d'un damier) :

Le style (externe) correspondant s'écrit :

ul { padding: 0 0 0 10px; margin: 6px 20px 10px 60px; font-size: 11pt; text-align: justify }
li { margin: 0 0 2px 0; padding: 0; background-color: #F6F6FF; list-style-image: url('images/puce.gif') }

Cette solution ne règle pas le problème de l'affichage défectueux des puces dans Mozilla.

Deuxième solution. Elle consiste à créer une liste sans marqueur, et à traiter la puce comme une image de fond non répétée. Une image adéquate permet de faire apparaître la puce et la liste sur des fonds différents, comme le montre l'exemple suivant :

Le code correspondant s'écrit :

<ul style="list-style-type: none; padding: 0; margin: 0 20px 12px 55px">
<li style="background: url('images/puce-speciale.gif') no-repeat #F6F6FF; padding: 0 0 0 30px; margin:0 0 1px 0">Premier élément,<br>avec retour à la ligne</li>
<li style="background: url('images/puce-speciale.gif') no-repeat #F6F6FF; padding: 0 0 0 30px; margin:0 0 1px 0">Second élément, sans retour à la ligne</li>
</ul>

Il ne faut pas oublier la déclaration "padding: 0" si l'on veut obtenir le même affichage dans les divers navigateurs. L'image de fond qui joue le rôle de puce possède la structure suivante :

Cette fois, le bug du mauvais affichage de la puce graphique dans Mozilla disparaît.

 

X-11- Conclusion

Les feuilles de style constituent un outil de gestion de liste plus condensé et plus élaboré que le HTML seul. Il faut cependant éviter quelques pièges (la valeur par défaut de padding-left du moteur Gecko, par exemple), et contourner quelques bugs (le mauvais affichage des puces graphiques dans Mozilla), si l'on veut présenter un résultat correct à tous les internautes.

Pas de page précédente Retour au sommaire Page suivante
Page précédente Retour au sommaire Page suivante
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base  
Copyright © CERIG/EFPG 1996-2004
Mise en page : J.C. Sohm