Liste personnalisée avec CSS et images
Un peu de code CSS peut changer l'apparence de vos pages en embellisant les listes qui deviennent des éléments graphiques à peu de frais.
Liste numérotée
Le code HTML pour la liste numérotée utilise la balise <ol>:
<ol>
<li><p>Google</p></li>
<li><p>Bing</p></li>
<li><p>Wolfram</p></li>
<li><p>Alexa</p></li>
</ol>
Dans les balises <li>, on insère une balise <p> pour pouvoir donner au texte un style différent de celui du numéro.
Ainsi, si on veut présenter de grands chiffres, mais un texte de taille normale, on redéfinit d'abord le style des balises <li>:
#prettylist li
{
font-size:20px;
font-style:italic;
}
Puis on redéfinit la balise <p> pour revenir au texte de taille et de style normal:
#prettylist li p
{
font-size:12px;
font-style:normal;
}
La démonstration embellit la liste en la plaçant dans un <fieldset> doté d'une image de fond, et aux bords arrondis sous certains navigateurs.
Démonstration
- Voir la démonstration de liste personnalisée.
Le code CSS complet est dans la source.
Autres options
Utiliser des chiffres romains:
list-style-type:upper-roman;
Utiliser des lettres:
list-style-type:upper-alpha;
Ou en minuscules:
list-style-type:lower-alpha;
Il est possible aussi insérer le numéro ou la puce dans le texte plutôt que les placer à gauche:
list-style:inside;
Exemple:
Voir la documentation du W3C pour plus de détails.
Liste à puces
Une autre option, pour une liste non numérotée, remplacer les puces par des images.
Le code HTML est ici simplifié car on peut se passer des balises intérieures. La balise <ol> est remplacée par la balise <ul>.
Un identificateur permet de personnaliser la liste sans modifier le reste de la page.
<ul id="imglist">
<li>Google</li>
<li>Bing</li>
<li>Wolfram</li>
<li>Alexa</li>
</ul>
Le code CSS remplace simplement le rond noir qui est l'image par défaut par une image d'exemple:
#imglist li
{
list-style-image: url(images/cc-ok.png);
font-size:16px;
}
Démonstration:
Voir aussi...
D'autres utilisations des listes.
Mise en pratique du style upper-roman...
(c) 2010 Xul.fr
Licence: Vous êtes libre d'utiliser le code de ces tutoriels
pour motoriser votre propre site. Soyez aimable de ne pas placer les tutoriels
ou autres fichiers sur un autre site, placez plutôt un lien sur l'article.
Mais vous pouvez imprimer les pages et les distribuer avec le code à
des fins d'enseignement.