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 :

  1. Élément de liste numérotée 1
  2. Élément de liste numérotée 2
  3. Élément de liste numérotée 3

Liste ordonnée avec chiffres romains :

  1. Élément de liste numérotée 1
  2. Élément de liste numérotée 2
  3. É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 :

&nbsp; Des hommes.

Épisode 6 »

Fiche technique

À propos de l'auteur

Joe Gillespie est un web designer qui partage ses passions pour le design, les CSS et la typographie depuis 8 ans sur son site Web Page Design for Designers. Il a pris sa retraite du Web cette année, au terme de 80 publications mensuelles. Dommage pour nous !

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

CSS

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site