Après avoir été preque totalement abandonnées, les listes sont devenues très présentes dans les pages HTML.
Beaucoup de regroupements sont désormais considérés comme des listes, en particulier les regroupements de liens (barre de navigation, liens dans les hors-textes latéreaux ou les pieds de page) et les vignettes photos. On voit même parfois des formulaires de saisie considérés comme des listes de zones de saisie.
Les spécifications pour les listes sont définies dans la version 2.1 des CSS et quelques modifications mineures sont en discution pour la version 3.

### Propriétés de liste

Il n'y a que 4 propriétés concernant directement les listes :

- list-style-type définit le type de puce ou de numérotation de la ligne de la liste,
- list-style-position définit la position de la puce dans la ligne,
- list-style-image définit une image à utiliser comme puce de la ligne,
- list-style est un raccourci pour les 3 propriétés précédentes. C'est cette propriété qui est la plus souvent utilisée.

#### Types de puce

Tester les types de puce

#### Position de la puce

L'exemple suivant montre les 2 positions possibles pour la puce : en dehors de la ligne (par défaut) ou à l'intérieur de la ligne.
Une bordre rouge est mise sur le côté gauche des lignes pour bien montrer le positionnement.

Exemple : position de la puce
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> Pour mon anniversaire je veux : <ul> <li>un X-Wing rouge</li> <li>un sabre-laser</li> </ul> Et à Noël : <ul> <li>un chapeau de Gandalf</li> <li>de l'herbe à pipe de la Comté.</li> </ul> </body> </html>
Fichier CSS : styles.css
ul:first-of-type { list-style: square outside; /* Puce en dehors - défaut*/ } ul:last-of-type { list-style: square inside; /* Puce dedans */ } li { border-left: 2px solid red; }

#### Image comme puce

On peut utiliser n'importe quelle image pour remplacer les puces par défaut des lignes d'une liste.

Exemple : image comme puce
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> Pour mon anniversaire je veux : <ul> <li>un X-Wing rouge</li> <li>un sabre-laser</li> </ul> Et à Noël : <ul> <li>un chapeau de Gandalf</li> <li>de l'herbe à pipe de la Comté.</li> </ul> </body> </html>
Fichier CSS : styles.css
ul:first-of-type { list-style: url(../exemples/img/star.png); } ul:last-of-type { list-style: url(../exemples/img/fleche.gif); }

### Listes avec images et textes

Une forme de liste très souvent utilisée mélange une image sur la gauche et du texte en vis à vis à droite. C'est le type de liste que l'on trouve par exemple sur Facebook ou Twitter.

liste dans twitter
liste dans facebook
Exemple : gouttières
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <ul> <li> <img src="../exemples/img/fb_yoda.png"> <p><a href="">Yoyo</a> a changé sa photo de couverture</p> <p>20 mai, 10h30</p> </li> <li> <img src="../exemples/img/vador_sucks.jpg"> </li> </ul> <ul> <li>17 personnes aiment ça.</li> <li> <img src="../exemples/img/fb_vador.png"> <p><a href="">Darkounet</a> Tes faibles talents ne font pas le poids face à la puissance du côté obscur.</p> <p>20 mai, 12h18</p> </li> <li> <img src="../exemples/img/fb_potter.png"> <p><a href="">HPot</a> Ce ne sont pas nos aptitudes qui déterminent ce que nous sommes, ce sont nos choix.</p> <p>20 mai, 15h45</p> <li> <img src="../exemples/img/fb_gandalf.png"> <p><a href="">Gandalf</a> En fait, le mieux serait que vous ne parliez pas du tout.</p> <p>21 mai, 8h02</p> </li> </ul> </body> </html>
Fichier CSS : styles.css
/* propriétés communes aux 2 listes */ ul { list-style: none; margin: 10px auto 0 auto; padding: 5px; width: 450px; border: 1px solid #D0D1D5; color: #141823; overflow: auto; } /* 1ere liste : coins arrondis en haut */ ul:first-of-type { border-radius: 5px 5px 0 0; padding-bottom: 10px; } /* 2eme liste : coins arrondis en bas */ ul:last-of-type { background: #F6F7F8; margin: 0 auto; border-top: none; border-radius: 0 0 5px 5px; } /* marges haut et bas pour les lignes */ li { margin: 5px 0; } /* les images dans le lignes flottent à gauche */ li img { float: left; } /* les paragraphes dans les lignes ont une marger interne à gauche pour que le texte ne viennent pas en dessous de l'avatar de l'utisateur */ li p { margin: 0; padding-left: 46px; } /* couleur gris clair pour le 2eme paragraphe des lignes */ li p:nth-of-type(2) { color: #999; } /* liens dans les lignes */ li a { color: mediumblue; font-weight: bold; text-decoration: none; } /* la 1ere ligne de la 2eme liste a un bord en bas */ ul:last-of-type li:first-of-type { border-bottom: 1px solid #D0D1D5; margin: 0; }

#### Top 5

liste à réaliser
ligne au survol de la souris

Complétez le code HTML et le code CSS pour obtenir le résultat ci-contre.

Vous pouvez classer les films comme vous désirez. Les images ont toutes la même dimension : 120 pixels de large et 160 pixels de haut. Les correspondances avec les films sont :

- Le Cinquième Element
  ../exemples/img/hit_element.jpg
- Avatar
  ../exemples/img/hit_avatar.jpg
- L'Empire contre-attaque
  ../exemples/img/hit_empire.jpg
- Brazil
  ../exemples/img/hit_brazil.jpg
- Gattaca
  ../exemples/img/hit_gattaca.jpg

Les numéros ne sont pas faits avec une liste ordonnée. Leur police est Helvetica ou Verdana, gras, 160 pixels.

La police pour le titre du film est de taille 20 pixels.

Au survol de la souris, la couleur du numéro change (`red`) ainsi que la bordure de la ligne (4 pixel de large).

Code à compléter

Exercice : top 5
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <ul class="hit-parade"> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </oll> </body> </html>
Fichier CSS : styles.css
CODE CSS A COMPLETER

Une solution possible

Exercice : top 5
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <ul class="hit-parade"> <li> <p>1</p> <img src="../exemples/img/hit_element.jpg"> <p>Le Cinquième Elément</p> </li> <li> <p>2</p> <img src="../exemples/img/hit_avatar.jpg"> <p>Avatar</p> </li> <li> <p>3</p> <img src="../exemples/img/hit_empire.jpg"> <p>L'Empire contre-attaque</p> </li> <li> <p>4</p> <img src="../exemples/img/hit_brazil.jpg"> <p>Brazil</p> </li> <li> <p>5</p> <img src="../exemples/img/hit_gattaca.jpg"> <p>Gattaca</p> </li> </ul> </body> </html>
Fichier CSS : styles.css
.hit-parade { margin: 0; padding: 0; } /* lignes de la liste */ .hit-parade li { margin: 20px 0; font-family: Helvetica, Verdana, sans-serif; line-height: 160px; /* centrer verticalement le texte */ border: 4px solid transparent; /* marge transparente pour qu'il n'y ait pas de décalage au survol de la souris */ } /* 1er paragraphe d'une ligne, flottant à gauche */ .hit-parade li p:first-of-type { float: left; margin: 0; font-weight: bold; font-size: 160px; color: #999; } /* images de la liste, flottantes à gauche */ .hit-parade img { float: left; margin: 0 10px; } /* 2eme paragraphe d'une ligne */ .hit-parade li p:last-of-type { font-size: 20px; color: #000; margin: 0; } /* changement de couleur bordure ligne au survol souris */ .hit-parade li:hover { border: 4px solid red; } /* changement de couleur 1er parapgraphe au survol souris */ .hit-parade li:hover p:first-of-type { color: red; }

### Compteur de lignes

L'exercice précédent montre qu'il n'est pas facile de styler le numéro de ligne d'une liste numérotée. Si on veut avoir un compteur automatique, il est possible d'utiliser deux propriétés un peu particulières :

- counter-reset permet d'initialiser un compteur que l'on nomme à notre convenance et que l'on peut initialiser avec n'importe quelle valeur entière (éventuellement différente de 0, la valeur par défaut) :
  `counter-reset: mon_compteur;
  counter-reset: autre_compteur 10;`
- counter-increment incrémente automatiquement le compteur précédemment initialisé :
  `counter-increment: mon_compteur;`
  Il est possible de donner la valeur de l'incrément (1 par défaut). Cette valeur doit être un entier :
  `counter-increment: autre_compteur 5;`

Pour récupèrer le numéro de la ligne en cours on utilise la fonction `counter()` dont le paramètre est le nom d'un compteur. Une fois que l'on a le numéro de la ligne, on peut l'afficher avec le pseudo élément ::before et sa propriété content

L'exemple suivant reprend l'exercice sur le top 5 des films en utilisant la technique des compteurs.
On pourra noter que le code HTML est simplifié (disparition des numéros et des paragraphes).

Exemple : compteur de lignes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <ul class="hit-parade"> <li> <img src="../exemples/img/hit_element.jpg"> Le Cinquième Elément </li> <li> <img src="../exemples/img/hit_avatar.jpg"> Avatar </li> <li> <img src="../exemples/img/hit_empire.jpg"> L'Empire contre-attaque </li> <li> <img src="../exemples/img/hit_brazil.jpg"> Brazil </li> <li> <img src="../exemples/img/hit_gattaca.jpg"> Gattaca </li> </ul> </body> </html>
Fichier CSS : styles.css
.hit-parade { margin: 0; padding: 0; list-style: none; /* pas de puce pour la liste */ counter-reset: film; /* initialisation du compteur */ } .hit-parade li { margin: 20px 0 20px 90px; /* marge, en particulier à gauche pour laisser la place au numéro de ligne */ font: 20px/160px Helvetica, Verdana, sans-serif; position: relative; /* pour pouvoir positionner en absolu le pseudo élément */ } /* le numéro de la ligne avec un pseudo élément */ .hit-parade li::before { counter-increment: film; /* incrément du compteur */ content: counter(film); /* génération du contenu */ position: absolute; /* positionnement */ left: -90px; /* en début de ligne */ font-weight: bold; font-size: 160px; color: #999; } /* images de la liste, flottantes à gauche */ .hit-parade img { float: left; margin: 0 10px; } .hit-parade li:hover::before { color: red; }

#### Top 5 inversé

liste à réaliser

Complétez le code CSS pour obtenir le résultat ci-contre.

Vous pouvez classer les films comme vous désirez, l'important étant de commencer par le cinquième et de finir par le premier. Les images ont toutes la même dimension : 120 pixels de large et 160 pixels de haut.

Le diamètre des boîtes des numéros est de 50 pixels. Le bord est de 4 pixel, couleur `chocolate`. Le fond est `darkorange`. La police est Helvetica ou Verdana, gras, 30 pixels.

Au survol de la souris, la couleur du numéro change (`white`), ainsi que le fond (`firebrick`) et la bordure (`orangered`). Un halo est ajouté avec `rgba(255, 69, 0, 0.8)`.

ligne au survol de la souris

Code à compléter

Exercice : top 5 inversé
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <ul class="hit-parade"> <li> <img src="../exemples/img/hit_element.jpg"> Le Cinquième Elément </li> <li> <img src="../exemples/img/hit_avatar.jpg"> Avatar </li> <li> <img src="../exemples/img/hit_empire.jpg"> L'Empire contre-attaque </li> <li> <img src="../exemples/img/hit_brazil.jpg"> Brazil </li> <li> <img src="../exemples/img/hit_gattaca.jpg"> Gattaca </li> </ul> </body> </html>
Fichier CSS : styles.css
CODE CSS A COMPLETER

Une solution possible

Exercice : top 5 inversé
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <ul class="hit-parade"> <li> <img src="../exemples/img/hit_element.jpg"> Le Cinquième Elément </li> <li> <img src="../exemples/img/hit_avatar.jpg"> Avatar </li> <li> <img src="../exemples/img/hit_empire.jpg"> L'Empire contre-attaque </li> <li> <img src="../exemples/img/hit_brazil.jpg"> Brazil </li> <li> <img src="../exemples/img/hit_gattaca.jpg"> Gattaca </li> </ul> </body> </html>
Fichier CSS : styles.css
.hit-parade { margin: 0; padding: 0; list-style: none; /* pas de puce pour la liste */ counter-reset: film 6; /* initialisation du compteur */ } .hit-parade li { margin: 30px; font: 20px/160px Helvetica, Verdana, sans-serif; position: relative; /* pour pouvoir positionner en absolu le pseudo élément */ } /* le numéro de la ligne avec un pseudo élément */ .hit-parade li::before { counter-increment: film -1; /* décrément du compteur */ content: counter(film); /* génération du contenu */ position: absolute; /* positionnement */ left: -20px; top: -20px; font: bold 30px/50px Helvetica, Verdana, sans-serif; width: 50px; height: 50px; border: 4px solid chocolate; border-radius: 50%; background: darkorange; text-align: center; } /* images de la liste, flottantes à gauche */ .hit-parade img { float: left; margin: 0 10px; } /* survol d'une ligne par la souris */ .hit-parade li:hover::before { color: white; box-shadow: 0 0 5px 3px rgba(255, 69, 0, 0.8); border-color: orangered; background: firebrick; }

### Lignes flottantes

Il arrive souvent que les lignes des listes soient utilisées en positionnement flottant (`float: left` ou `float: right`) par exemple pour faire des listes horizontales (menu) ou des listes de vignettes photos.
Nous verrons en détail page suivante comment réaliser des menus avec les listes et nous allons ici montrer un exemple de présentation de vignettes.

Exemple : lignes flottantes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <ul class="vignette"> <li> <img src="../exemples/img/hit_12_singes.jpg"> L'Armée des 12 Singes </li> <li> <img src="../exemples/img/hit_avatar.jpg"> Avatar </li> <li> <img src="../exemples/img/hit_brazil.jpg"> Brazil </li> <li> <img src="../exemples/img/hit_element.jpg"> Le Cinquième Elément </li> <li> <img src="../exemples/img/hit_empire.jpg"> L'Empire contre-attaque </li> <li> <img src="../exemples/img/hit_futur.jpg"> Retour vers le Futur </li> <li> <img src="../exemples/img/hit_gattaca.jpg"> Gattaca </li> <li> <img src="../exemples/img/hit_matrix.jpg"> Matrix </li> <li> <img src="../exemples/img/hit_men.jpg"> Men in Black </li> <li> <img src="../exemples/img/hit_minority.jpg"> Minority Report </li> <li> <img src="../exemples/img/hit_robot.jpg"> I Robot </li> <li> <img src="../exemples/img/hit_strange.jpg"> Strange Days </li> </ul> </body> </html>
Fichier CSS : styles.css
.vignette { margin: 0; padding: 0; list-style: none; /* pas de puce pour la liste */ overflow: auto; /* pour que les blocs flottants ne sortent pas de la liste */ } .vignette li { float: left; margin: 10px; width: 120px; height: 200px; text-align: center; border: 1px solid #aaa; border-radius: 5px; padding: 0 0 5px 0; }

#### Vignettes flottantes

liste à réaliser

Complétez le code CSS pour obtenir le résultat ci-contre.

Les images ont toutes la même dimension : 120 pixels de large et 160 pixels de haut. Par défaut elles sont affichées tronquées dans un ovale.

Au survol de la souris, l'image est affichée complétement. Le titre du film est lui aussi affiché dans une boîte placée à 10 pixels du bord inférieur de l'image. Le titre est récupéré dans l'attribut `data-titre` des lignes de la liste. Une ombre est ajoutée tout autour de l'image.

ligne au survol de la souris

Code à compléter

Exercice : vignettes flottantes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <ul class="vignette"> <li data-titre="L'Armée des 12 Singes"> <img src="../exemples/img/hit_12_singes.jpg"> </li> <li data-titre="Avatar"> <img src="../exemples/img/hit_avatar.jpg"> </li> <li data-titre="Brazil"> <img src="../exemples/img/hit_brazil.jpg"> </li> <li data-titre="Le Cinquième Elément"> <img src="../exemples/img/hit_element.jpg"> </li> <li data-titre="L'Empire contre-attaque"> <img src="../exemples/img/hit_empire.jpg"> </li> <li data-titre="Retour vers le Futur"> <img src="../exemples/img/hit_futur.jpg"> </li> <li data-titre="Gattaca"> <img src="../exemples/img/hit_gattaca.jpg"> </li> <li data-titre="Matrix"> <img src="../exemples/img/hit_matrix.jpg"> </li> <li data-titre="Men in Black"> <img src="../exemples/img/hit_men.jpg"> </li> <li data-titre="Minority Report"> <img src="../exemples/img/hit_minority.jpg"> </li> <li data-titre="I Robot"> <img src="../exemples/img/hit_robot.jpg"> </li> <li data-titre="Strange Days"> <img src="../exemples/img/hit_strange.jpg"> </li> </ul> </body> </html>
Fichier CSS : styles.css
CODE CSS A COMPLETER

Une solution possible

Exercice : vignettes flottantes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <ul class="vignette"> <li data-titre="L'Armée des 12 Singes"> <img src="../exemples/img/hit_12_singes.jpg"> </li> <li data-titre="Avatar"> <img src="../exemples/img/hit_avatar.jpg"> </li> <li data-titre="Brazil"> <img src="../exemples/img/hit_brazil.jpg"> </li> <li data-titre="Le Cinquième Elément"> <img src="../exemples/img/hit_element.jpg"> </li> <li data-titre="L'Empire contre-attaque"> <img src="../exemples/img/hit_empire.jpg"> </li> <li data-titre="Retour vers le Futur"> <img src="../exemples/img/hit_futur.jpg"> </li> <li data-titre="Gattaca"> <img src="../exemples/img/hit_gattaca.jpg"> </li> <li data-titre="Matrix"> <img src="../exemples/img/hit_matrix.jpg"> </li> <li data-titre="Men in Black"> <img src="../exemples/img/hit_men.jpg"> </li> <li data-titre="Minority Report"> <img src="../exemples/img/hit_minority.jpg"> </li> <li data-titre="I Robot"> <img src="../exemples/img/hit_robot.jpg"> </li> <li data-titre="Strange Days"> <img src="../exemples/img/hit_strange.jpg"> </li> </ul> </body> </html>
Fichier CSS : styles.css
.vignette { margin: 0; padding: 0; list-style: none; /* pas de puce pour la liste */ overflow: auto; /* pour que les blocs flottants ne sortent pas de la liste */ } /* Ligne flottante avec dimensions fixées */ .vignette li { float: left; margin: 10px; width: 120px; height: 160px; position: relative; /* pour pouvoir positionner en absolu le pseudo élément */ } /* pseudo élément pour le titre */ .vignette li::before { content: attr(data-titre); /* récupération du contenu de l'attribut data-titre */ position: absolute; left: 0; bottom: 10px; width: 118px; border: 1px solid black; text-align: center; display: none; /* masqué par défaut */ background: white; } /* affichage du pseudo élément au survol de la souris */ .vignette li:hover::before { display: block; } .vignette img { border-radius: 50%; /* vignette ovale */ } /* vignette rectanguliare au sruvol de la souris */ .vignette li:hover img { border-radius: 0; }