Les listes sont des outils très utiles pour la réalisation de mises en page claires, aérées et bien hierarchisées. Elles constituent en outre l'ossature des menus en particulier des menus déroulants. il existe trois types de listes :
- Les listes ordonnées (ordered list), <ol>, dont les items sont identifiés par des chiffres romains, des chiffres arabes ou des lettres.
- Les listes non-ordonnées (unordered list), <ul>, dont les items sont identifiés par des puces.
- Les listes de définition (definition list), <dl>, assez peu connues ni utilisées.
Les listes <ol> et <ul>, sont des éléments block, elles encadrent d'autres éléments block, <li>, pour list-item.
La liste de définition <dl> elle aussi de type block, encadre deux autres balises de type block :
- <dt> : Definition Term
- <dd> : Definition Description
La liste de définition permet de représenter de façon hierarchisée un texte dont les titres sont les éléments <dt> et les paragraphes, les éléments <dd>.
Quel que soit leur type, les listes obéïssent à la structure ci-dessous :
L'imbrication des listes doit respecter un principe simple, chaque bloc <ol> ou <ul> imbriqué doit s'inscrire entre
les balises <li> et </li> de l'élément de liste dans lequel il est imbriqué.
En théorie, il n'existe pas de limite dans le nombre de listes qui peuvent être imbriquées. ce sont l'intérêt pratique et la complexité croissante du code qui en fait fixent ces limites.
Notez que les listes imbriquées sont la base de la réalisation des menus déroulants à plusieurs niveaux.
L'imbrication est également possible avec les listes de définition. Dans ce cas, l'élément <dl> doit s'inscrire entre les balises <dd> et </dd> de l'élément de liste dans lequel il est imbriqué.
En tant qu'éléments de type block, les éléments <ol> et <ul>, <li>, <dl>, <dt> et <dd>, peuvent se voir attribuer les propriétés communes à tous les éléments block : margin, border, padding, height, width, background, color...
Notons, que les navigateurs attribuent par défaut aux éléments <ol>, <ul> les margin-left qui assurent leur décalage vers la droite. Cependant ces valeurs par défaut varient selon les navigateurs. Il peut donc être préférable de définir les valeurs des marges pour assurer un aspect uniforme des pages quel que soit le navigateur.
Les éléments <dd> des listes de définition ont également une margin-left par défaut, mais ni puce ni indicateur numérique.
Les list-items peuvent se voir attribuer une propriété spécifique permettant de les identifier : list-style-type : valeur, qui peut prendre dix valeurs :
Les puces des list-items peuvent être décalées de leur position initiale par la propriété list-style-position : valeur, qui peut prendre trois valeurs :
Dans les listes ordonnées la numérotation peut démarrer à la valeur déterminée par l'attribut start="valeur" . Quel que soit le type de numérateur utilisé, cette valeur doit être exprimée en chiffres décimaux.
Préalablement à la réalisation de vos exercices, il vous faut placer dans la feuille de style externe, la longue liste de sélecteurs ci-dessous. Je vous suggère de les identifier dans la feuille par la ligne de commentaire /*style des Listes*/.
Dans le code html, créons un élément <div class="Boites2> dans lequel nous placerons :
- Un titre <h3> "les listes ordonnées : Quelques rois de France"
- Une liste principale <ol class="RomainMaj"> dont les items prendront les noms des différentes dynasties.
- Une liste secondaire, Les Mérovingiens <ol class="RomainMin">
- Une liste secondaire, Les Carolingiens <ol class="AlphaMin">
- Une liste secondaire, Les Capétiens <ol class="RomainMin" start="31">
- Une liste secondaire, Les Valois <ol class="Decimal" start="41">
- Une liste tertiaire, Valois <ol class="Decimal" start="411">
- Une liste tertiaire, Valois Angoulême <ol class="Decimal" start="421">
- Une liste secondaire, Les Bourbons <ol class="AlphaMaj" start="131">
Vous trouverez dans le fichier texte RoisdeFrance.txt, le détail du contenu de ces listes.
Dans le code html, sous le précédent créons un élément <div class="Boites2> dans lequel nous placerons :
- Un titre <h3> "les listes non ordonnées : la marine"
- Une liste principale <ul class="Carre">contenant deux items :
- À voile?, contenant quatre items :
- Une liste secondaire, Gréément Carré <ul class="Cercle">
- Une liste secondaire, Gréément Aurique <ul class="Disque">
- Une liste secondaire, Gréément Latin <ul class="Voile">
- Une liste secondaire, Gréément Au Tiers <ul class="Cercle">
- Ou à vapeur?, contenant trois items :
- Une liste secondaire, Marine de Guerre <ul class="Cercle">
- Une liste secondaire, Marine de Commerce <ul class="Vapeur"> Sur les quatre items de cette liste secondaire, nous expérimenterons dans le style en ligne des list-items, les propriétés :
- list-style-position:inside;
- list-style-position:outside;
- Une liste secondaire, Marine de Pêche, sans class
Vous trouverez dans le fichier texte LaMarine.txt, le détail du contenu de ces listes.
Dans le code html, sous le précédent créons un élément <div class="Boites2> dans lequel nous placerons :