<< Retour au sommaire

 

 

XHTML, les listes.

 

 

 

Table des matières

  1. La balise <ul> La liste non ordonnée ;
  2. La balise <ol> La liste ordonnée ;
  3. La balise <dl> La liste de définitions ;
  4. La propriété CSS list-style-position ;
  5. La propriété CSS list-style-type.

 

 

La balise <ul> La liste non ordonnée

 

Cette balise permet de créer une liste composée d’éléments pour lesquels il n‘y a pas d’ordre de présentation.

 

La syntaxe :

<ul>

<li>premier élément</li>

<li>deuxième élément</li>

<li>Troisième élément</li>

</ul>

 

La description :

La liste doit débuter par <ul> et finir par </ul>.

A l’intérieure de la liste, chaque élément doit être placé entre <li> et </li>.

 

Voici un exemple :

 

<p>Liste des animaux sympas <br />

<ul>

<li>Le chat</li>

<li>Le chien</li>

<li>L'oiseau</li>

<li>Le cobra lol</li>

</ul>

</p>

 

 


La balise <ol> La liste ordonnée

 

Avec cette balise, vous devez prendre en compte maintenant la position des éléments !

 

La syntaxe :

<ol>

<li>premier élément</li>

<li>Deuxième élément</li>

<li>Troisième élément</li>

</ol>

 

La liste doit débuter par la balise <ol> et finir par </ol>.

Entre les deux, vous devez écrire chaque élément de la liste entre les balises <li> et </li>.

Mais attention, cette fois l’ordre joue un rôle dans la présentation de la liste !

 

Voici un exemple :

 

<p>Voici la liste des planètes du système solaire par ordre croissant d'éloignement du Soleil :<br />

<ol>

<li>MERCURE</li>

<li>VÉNUS</li>

<li>LA TERRE</li>

<li>MARS</li>

<li>JUPITER</li>

<li>SATURNE</li>

<li>URANUS</li>

<li>NEPTUNE</li>

<li>PLUTON</li>

</ol></p>

 

 


La balise <dl> La liste de définitions

 

La liste de définitions permet de créer une liste d’éléments pour lesquels des définitions sont associées.

 

La syntaxe :

 

<dl>

<dt>Premier élément</dt>

<dd>Définition du premier élément</dd>

<dt>Deuxième élément</dt>

<dd>Définition du deuxième élément</dd>

<dt>Troisième élément</dt>

<dd>Définition du troisième élément</dd>

</dl>

 

La description :

On commence la liste par <dl> et on la termine par </dl>.

Entre les deux, on place les éléments à définir dans les balises <dt> et </dt>, et pour chacun des éléments, vous devez créer une définition qui est placée entre <dd> et </dd>.

 

Voici un exemple :

 

<p>Voici la liste des planètes du système solaire par ordre croissant d'éloignement du Soleil :<br />

Pour chacune d'entre elle, vous trouverez la composition de la surface.<br />

<dl>

<dt>MERCURE</dt>

<dd>Surface composée de roches</dd>

<dt>VÉNUS</dt>

<dd>Surface composée de roches</dd>

<dt>LA TERRE</dt>

<dd>Surface composée à 71% d'océans et 29% de continents</dd>

<dt>MARS</dt>

<dd>Surface composée de roches</dd>

<dt>JUPITER</dt>

<dd>Surface composée d'un océan d'hydrogène liquide</dd>

<dt>SATURNE</dt>

<dd>Surface composée d'un océan d'hydrogène liquide</dd>

<dt>URANUS</dt>

<dd>Surface composée de glace</dd>

<dt>NEPTUNE</dt>

<dd>Surface composée de glace</dd>

<dt>PLUTON</dt>

<dd>Surface composée de glace</dd>

</dl>

</p>

 

 


La propriété CSS list-style-position

 

Vous pouvez bien sûr définir des styles traditionnels CSS pour les balises <ul>, <ol>, <li>, <dt> et <dd>.

 

Mais il existe néanmoins une propriété CSS « que je vais vous présenter ici :

 

Cette propriété est « list-style-position », elle peut recevoir 2 valeurs :

Inside, la liste n’est pas mise en retrait.

Outside, la liste est mise en retrait, c’est d’ailleurs la présentation par défaut.

 

 


La propriété CSS list-style-type

 

La propriété list-style-type permet de modifier l’apparence de la puce.

Elle peut prendre de nombreuses valeurs, mais certaines valeurs ne concernent que les listes non ordonnées, et inversement, certaines valeurs ne concernent que les listes ordonnées…

 

Pour les listes non ordonnées (<ul>) :

disc : un disque noir (par défaut).

circle : un cercle.

square : un carré.

none : aucune puce ne sera utilisée.

 

Pour les listes ordonnées (<ol>), le choix est vaste :

decimal : des nombres 1, 2, 3, 4, 5... (par défaut)

decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...). Ne fonctionne pas sur Internet explorer

upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...)

lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...)

upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...)

lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)

lower-greek : numérotation grecque. Ne fonctionne pas sur Internet Explorer

 

Philippe BOULANGER