• HTML
  • Quelques Bases
  • L'Ossature
  • Les Boites
  • La Syntaxe
  • La Structure
  • La Sémantique
• LES CSS
  • Enjeux
  • Techniques
  • Feuilles de Style
  • Sélecteurs
• TUTORIELS
  • Atelier 2011
  • Atelier 2011-2012
• EXEMPLES
  • Site Géologie
  • Vieux Gréements
  • Grands Navigateurs
  • Fortif. En Roussillon

Les trois types de listes

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 :

1. Les listes ordonnées <ol> (ordered list), dont les items sont identifiés par des chiffres arabes, des chiffres romains ou des lettres.
2. Les listes non-ordonnées <ul> (unordered list), dont les items sont identifiés par des puces.
3. Les listes de définition <dl> (definition list), assez peu utilisées qui permettent de présenter de façon hierarchisée un texte dont les titres sont les éléments <dt> (definition term) et les paragraphes, les éléments <dd> (definition description)

Les trois types de listes <ol>, <ul> et <dl>, ainsi que les éléments qu'elles encadrent <li> (list-item), <dt> et <dd>, sont des éléments de type block.

La structure des listes

Quel que soit leur type, les listes obéïssent à la structure ci-dessous, les couleurs visent à mettre en évidence l'espace occupé par les éléments de type block.

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, de fait, fixent ces limites.

Voyez ci-contre l'exemple de trois listes imbriquées contenant chacune trois list-items.

L'imbrication est également possible avec les listes de définition.

C’est tout juste un peu plus compliqué qu’avec les listes courantes car dans les listes de définition, les items vont par paires déléments <dt></dt> et <dd></dd>.

La liste imbriquée doit toujours être placée entre les balises ouvrantes et fermantes des éléments <dd></dd>.

Le code doit être écrit dans l'ordre de l'imbrication des listes.

La réalisation des listes imbriquées peut être source de muliples confusions si elle ne fait pas l'objet de beaucoup de rigueur et de méthode.

Tout d'abord, l'indentation des éléments et sous-éléments qui composent les listes doit être systématique car elle seule permet d'avoir au premier coup d'oeil une vision d'ensemble de l'organisation de la liste.

Le code doit être rédigé dans l'ordre de l'imbrication des différents niveaux de listes.

1. L'indentation
   11. Dans les éléments <ol>, <ul> et <dl>, les items <li>, <dt> et <dd> doivent être décalés d'une colonne par rapport aux balises ouvrantes et fermantes de la liste.
   12. Les éléments <ol>, <ul> et <dl> imbriqués doivent être décalés d'une colonne par rapport aux balises ouvrantes et fermantes de l'item dans lequel ils sont imbriqués.
2. L'ordre d'écriture du code
   21. On place d'abord le premier niveau de liste avec ses items.
   22. Dans ce premier niveau de liste, on crée un espace entre les balises des items devant contenir un niveau de liste imbriqué.
   23. On place la liste imbriquée entre les balises ouvrantes et fermantes de l'item.
   24. On répète la même opération pour chaque niveau de liste.

Voyez l'exemple de code ci-contre :

Les propriétés des listes

Les propriétés communes aux éléments block

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.

Vous avez pu remarquer que par défaut, les listes qui sont des assemblages d'éléments de type block, se développent dans le sens vertical. Pour réaliser à partir de listes des menus horizontaux, il faudra recourir à la propriété float.

Les propriétés spécifiques aux listes ordonnées et non ordonnées

L'attribut start