Indentation homogène des listes

Le changement de style des listes le plus fréquent consiste à modifier leur indentation, c'est à dire le décalage vers la droite des items de la liste. Mais ceci est souvent frustrant, car ce qui marche dans un navigateur ne produit pas le même effet dans un autre. Si vous déclarez par exemple que les listes n'auront pas de marge gauche, vous obtenez le résultat attendu dans Internet Explorer, mais elles restent obstinément à la même place dans les navigateurs Gecko.

Pour comprendre pourquoi cela se produit ainsi, et, plus important, pour éviter ces problèmes, nous allons devoir examiner en détail la construction des listes.

Construction d'une liste

Commençons par une simple liste minimale. Notre item de liste n'a pas de marqueur (désigné par ailleurs sous le nom de « puce »), et n'est pas intégré à une liste proprement-dite. Il se tient seul dans le vide, comme le montre la figure 1.

Figure 1

La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'item de liste. Gardez en mémoire le fait que, pour l'instant, notre item n'a ni padding ni bordure. Si nous ajoutons deux items supplémentaires, nous obtenons le résultat indiqué par la figure 2.

Figure 2

Nous allons à présent placer ces items dans un élément parent : ici, une liste non ordonnée (autrement-dit un ul). Conformément au modèle de boîte CSS, les boîtes d'item de liste doivent être affichées dans la zone de contenu de leur élément parent. Celle-ci n'ayant pour l'instant aucune marge ni aucun padding, nous arrivons au résultat montré par la figure 3.

Figure 3

Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément ul. Puisqu'il n'a pas de padding, cette limite épouse étroitement celles de nos trois items de liste.

Ajoutons à présent les marqueurs des items de liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme le montre la figure 4.

Figure 4

Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément ul, mais ce n'est pas l'important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments li. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque li.

C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément li, dès lors que la propriété list-style-position a la valeur outside. Si cette valeur est changée en inside, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments li, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci.

Une double indentation

Comment ceci va-t-il être rendu dans un document ? Pour le moment, nous sommes dans une situation équivalente à ces styles :

ul, li {margin-left: 0; padding-left: 0;}

Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune indentation apparente, et nos marqueurs courront le risque d'être rejettés au-delà de la limite gauche de la fenêtre du navigateur.

Afin de l'éviter, et d'imposer une indentation, il existe trois possibilités pour l'implémentation dans un navigateur :

  1. Doter chaque élément li d'une marge gauche ;
  2. Doter chaque élément ul d'une marge gauche ;
  3. Doter chaque élément ul d'un padding gauche quelconque.

Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko, et partant de là, par tous les navigateurs embarquant celui-ci.

Voyons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément ul. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des items de listes et de cet élément ul, nous obtenons le résultat illustré par la figure 5.

Figure 5

De son côté, Gecko applique un padding gauche de 40 pixels à cet élément ul. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko comme le montre la figure 6.

Figure 6

Comme nous pouvons le voir, les marqueurs restent attachés aux éléments li, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément ul est stylé. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément ul

Obtenir un rendu homogène

En réunissant le tout, nous en arrivons à ceci : si vous voulez obtenir un rendu de listes homogène entre Gecko, Internet Explorer et Opera, vous devez spécifier à la fois la marge gauche et le padding gauche de l'élément ul. L'élément li peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez :

ul {margin-left: 0; padding-left: 40px;}

Si vous préférez suivre le modèle Explorer/Opera, vous écrirez alors :

ul {margin-left: 40px; padding-left: 0;}

Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à 1.25em si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un padding et une marge nuls :

ul {margin-left: 0; padding-left: 0;}

Souvenez-vous, cependant, qu'en faisant ainsi, vos puces se tiendront en dehors de votre liste et de son élément parent. Si ce parent est l'élément body, il y a de fortes chances qu'elles se retrouvent complètement en dehors de la fenêtre d'affichage du navigateur, et qu'elles ne soient donc plus visibles.

Conclusion

Au bout du compte, nous voyons qu'aucun des navigateurs mentionnés dans cet article n'a tort ou raison dans sa manière d'afficher les listes. Ces navigateurs utilisent différents styles par défaut, et c'est que réside le seul problème. En veillant à styler à la fois la marge gauche et le padding gauche des listes, vous obtiendrez un rendu bien plus homogène de leur indentation à travers les différents navigateurs.

Recommandations

  • Lorsque vous modifiez l'indentation des listes, veillez à indiquer à la fois padding et marge.

Informations sur le document original

  • Auteur(s) : Eric A. Meyer, Netscape Communications
  • Dernière Mise à jour : Publié le 30 août 2002
  • Copyright : Copyright © 2001-2003 Netscape. All rights reserved.
  • Note : Cet article réédité faisait initialement partie du site Netscape DevEdge.

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : Kyodev,