 |
 Personnaliser la numérotation des listes |
|
|
|
Connexion ratee
|
|
Lorsque vous utilisez des listes numérotées, vous pouvez vouloir autre chose
qu'une numérotation par des chiffres (1, 2, 3...) et voir par exemple des chiffres romains ou des lettres, ou
imbriquer plusieurs type de numérotation, et c'est justement ce que nous allons décrire ici. |
|
|
|
|
|
Il est en effet possible de définir dans une feuille de style le format de
numérotation qui apparaitra en regard des listes numérotées.
Six apparences sont possible :
- list-style-type: decimal : 1, 2, 3, 4... (option par défaut),
- list-style-type: lower-roman : i, ii, iii, iv...,
- list-style-type: upper-roman : I, II, III, IV...,
- list-style-type: lower-alpha : a, b, c, d...,
- list-style-type: upper-alpha : A, B, C, D...,
- list-style-type: none : la numérotation n'est pas visible (peu
d'intérêt).
Il est également possible de 'modifier' la position de la puce par l'attribut 'list-style-position' :
- list-style-position: inside : la numérotation se place où le texte
devrait démarrer et l'espace entre la numérotation et le texte est réduit,
- list-style-position: outside : la numérotation se place comme d'habitude
(comportement par défaut).
Si vous déclarez une classe qui utilise ces options, seules les listes appelant cette classe l'appliqueront, mais
si vous redéfinissez l'attribut 'OL LI', toutes les listes appliqueront le style. Cela
peut être pratique pour homogénéiser votre site.
Attention : Netscape ne tient pas compte de la définition 'list-style-position'.
|
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<style>
.num { list-style-type: decimal; }
.romain { list-style-type: lower-roman; }
.alpha { list-style-type: upper-alpha; }
.externe { list-style-position: outside; }
.interne { list-style-position: inside; }
</style>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<ol class="interne">
<li>Premier élément d'une liste d'options déclarée 'inside'...
<li>Second élément d'une liste d'options déclarée 'inside'...
</ol>
<ol class="externe">
<li>Premier élément d'une liste d'options déclarée 'outside'...
<li>Second élément d'une liste d'options déclarée 'outside'...
</ol>
<ol class="num">
<li>Ici une liste d'option 'classique',
<li>Ici une liste d'option 'classique',
<li>Ici une liste d'option 'classique',
</ol>
<ol class="romain">
<li>Ici une liste d'option 'à la romaine',
<li>Ici une liste d'option 'à la romaine',
<li>Ici une liste d'option 'à la romaine',
<li>Ici une liste d'option 'à la romaine',
</ol>
<ol>
<li class="romain">Une option de liste en romain,
<li class="alpha">une option de liste en alphabétique,
<li class="romain">une option de liste en romain,
<li>une option 'normale', sans style,
<li class="interne">une dernière option dont l'alignement 'inside'...
</ol>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- Premier élément d'une liste d'options déclarée 'inside' assez long pour voir l'alignement gauche...
- Second élément d'une liste d'options déclarée 'inside' assez long pour voir l'alignement gauche...
- Premier élément d'une liste d'options déclarée 'outside' assez long pour voir l'alignement gauche...
- Second élément d'une liste d'options déclarée 'outside' assez long pour voir l'alignement gauche...
- Ici une liste d'option 'classique',
- Ici une liste d'option 'classique',
- Ici une liste d'option 'classique',
- Ici une liste d'option 'à la romaine',
- Ici une liste d'option 'à la romaine',
- Ici une liste d'option 'à la romaine',
- Ici une liste d'option 'à la romaine',
- Une option de liste en romain,
- une option de liste en alphabétique,
- une option de liste en romain,
- une option 'normale', sans style,
- une dernière option dont l'alignement 'inside' doit se différencier des options ci-dessus...
|
|
|
|
|
|
|
|
|
|
|
|
|
