CSS : on reprend tout à zéro ! (épisode 5)
Par Joe Gillespie
Cet article est le cinquième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.
Cinquième étape : des listes à gogo
Une autre technique très courante pour mettre en forme des documents consiste à utiliser des « listes ». Elles ressemblent à des paragraphes, avec de petites choses en plus.
HTML peut nous fournir des listes de base qui ont soit des puces (listes non numérotées) <ul>...</ul>, soit des chiffres (listes numérotées) <ol>...</ol> en tête de chaque élément de la liste <li>...</li>. Chaque
catégorie présente quelques options que l'on peut indiquer dans le HTML : li type="square" donne des puces carrées, li type="i" donne des chiffres romains en bas de casse.
Liste non numérotée par défaut :
- Élément de liste non numérotée
- Élément de liste non numérotée
- Élément de liste non numérotée
Liste non numérotée avec puces carrées :
- Élément de liste non numérotée
- Élément de liste non numérotée
- Élément de liste non numérotée
Liste numérotée par défaut :
- Élément de liste numérotée 1
- Élément de liste numérotée 2
- Élément de liste numérotée 3
Liste ordonnée avec chiffres romains :
- Élément de liste numérotée 1
- Élément de liste numérotée 2
- Élément de liste numérotée 3
Les CSS vous offrent davantage de choix et de contrôle : il suffit d'ajouter une définition pour ol ou ul à vos styles.
ol {list-style-type: lower-roman; margin: 1em 0 1em 40px }
Cela revient au même que si vous l'ajoutiez à chaque élément de liste en HTML, et vous avez tout contrôle sur les marges qui entourent l'ensemble de la liste. Les quatre valeurs 1em 0 1em 40px correspondent à haut, droite, bas et gauche, et peuvent être exprimées en ems, en pourcentages ou en pixels.
Si vous souhaitez mieux contrôler individuellement les éléments de liste, vous pouvez également leur attribuer des marges, pour avoir davantage d'espacement entre les lignes : par exemple...
ol li { margin: .5em 0 .5em 0 }
...ajoute un demi-em d'espacement au dessus et en-dessous de chaque élément de liste pour une liste
numérotée. Pour une liste non numérotée, il faudrait le changer en ul li.
Mieux encore, vous pouvez utiliser vos propres graphiques comme puces.
ul { list-style-image: url(images/smiley.gif) }
ul li { margin: 1em 0 1em 0}
- Ça, c'est génial
- Ça aussi, vous aimerez
- Et ça aussi bien sûr!
Et le top, une image de puce différente pour chaque élément de liste...
<li style="list-style-image:url(images/icone1.gif); margin: 1em 0 1em 0">Des hommes</li> <li style="list-style-image:url(images/icone2.gif); margin: 1em 0 1em 0">Des images</li> <li style="list-style-image:url(images/icone3.gif); margin: 1em 0 1em 0">Des idées</li> <li style="list-style-image:url(images/icone4.gif); margin: 1em 0 1em 0">Des écrits</li>
- Des hommes
- Des images
- Des idées
- Des écrits
Les styles définis dans la partie « head » concernent l'ensemble de la page, ce que nous ne souhaitons pas dans le cas présent. Pour appliquer des styles séparément à des éléments de liste, il faut le faire « sur place », ou bien encore « inline ». Les définitions sont insérées entre les balises HTML <li> et </li>, dans la partie « body » de la page. Notez cependant qu'IE6 (Windows) place les icônes très près du texte. J'ai ajouté un peu d'espace supplémentaire au début de chaque ligne pour compenser, comme ceci :
Des hommes.
http://www.wpdfd.com/editorial/basics/cssbasics5.html