sommaire
indexpage précédentepage suivante
imprimer
envoyer
marquer
Listes à puces, listes numérotées: <liste> |
Une liste à puces se définit à l'aide d'un élément <liste> qui englobe une série d'éléments d'information dans une page (généralement des paragraphes). Chacun de ces éléments apparaitra alors précédé d'une puce, comme le montre cet exemple: Exemple <liste> <p>Lorem ipsum dolor sit amet</p> <p>consectetur adipiscing elit</p> <p>Sed non risus</p> </liste> Ce qui donne :
|
Contrairement à une puce associée à un paragraphe, ou à un séparateur inséré en début de paragraphe, toute l'information sera alignée à gauche par rapport à la puce (si cette information contient plusieurs lignes de texte, elles seront toutes alignées sur le modèle de la première). Cette différence est illustrée par l'exemple suivant: Exemple <liste puce="disque"> <p>Lorem ipsum dolor sit amet,...</p> </liste> <p puce="disque">Lorem ipsum dolor sit amet,...</p> Ce qui donne :
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. A la place d'une puce, on peut utiliser une numérotation automatique (avec des nombres, des lettres, des chiffres romains...), par exemple: Exemple <liste numérotation="A)"> <p>Lorem ipsum dolor sit amet</p> <p>consectetur adipiscing elit</p> <p>Sed non risus</p> </liste> Ce qui donne :
A la place d'une puce ou d'une numérotation, on peut également utiliser une ligne de séparation (ou une combinaison des deux ou des trois), par exemple: Exemple <liste séparateur="colorBar5"> <p>Lorem ipsum dolor sit amet</p> <p>consectetur adipiscing elit</p> <p>Sed non risus</p> </liste> Ce qui donne :
Choix des puces |
L'utilisation de l'attribut puce dans l'élément <liste puce="..."> permet de choisir la puce à utiliser. Vous pouvez choisir parmi une large palette de puces prédéfinies. La valeur par défaut, lorsque cet attribut n'est pas présent, est disque. Dans le cas où un attribut numérotation ou séparateur est présent, cette valeur par défaut ne sera pas utilisée (aucune puce ne sera générée, sauf si mettez explicitement un attribut puce). Les exemples à droite ont été obtenus avec le code suivant: Exemple <liste puce="disque"> ... </liste> <liste puce="carré1"> ... </liste> <liste puce="plus"> ... </liste> |
|
Choix d'une numérotation |
L'utilisation de l'attribut numérotation dans l'élément <liste numérotation="..."> permet de numéroter les éléments de la liste. Vous pouvez choisir parmi une large palette de numérotations prédéfinies. Par défaut, si cet attribut n'est pas présent, il n'y a pas de numérotation. Les exemples à droite ont été obtenus avec le code suivant: Exemple <liste numérotation="1."> ... </liste> <liste numérotation="a"> ... </liste> <liste numérotation="I."> ... </liste> |
|
Choix des lignes de séparation |
L'utilisation de l'attribut séparateur dans l'élément <liste séparateur="..."> permet de choisir la ligne de séparation à utiliser. Vous pouvez choisir parmi une large palette de lignes de séparation prédéfinies Par défaut, si cet attribut n'est pas présent, il n'y a pas de ligne de séparation. Les exemples à droite ont été obtenus avec le code suivant: Exemple <liste séparateur="ligne2"> ... </liste> <liste séparateur="colorDots3"> ... </liste> <liste séparateur="pointillés3"> ... </liste> |
|
Combinaison de puces, de numérotation et de lignes de séparationRien ne vous empêche de combiner des puces avec l'attribut puce et des lignes de séparation avec l'attribut séparateur. |
Exemple <liste puce="flèche" séparateur="colorBar4"> <p>Lorem ipsum dolor sit amet</p> <p>consectetur adipiscing elit</p> <p>Sed non risus</p> </liste> |
|
Exemple <liste puce="cercle" numérotation="I" séparateur="pointillés2"> <p>Lorem ipsum dolor sit amet</p> <p>consectetur adipiscing elit</p> <p>Sed non risus</p> </liste> |
|
Exemple <liste numérotation="A)" séparateur="tirets3"> <p>Lorem ipsum dolor sit amet</p> <p>consectetur adipiscing elit</p> <p>Sed non risus</p> </liste> |
|
||||||||||
Regrouper des éléments dans une listeSi vous désirez regrouper plusieurs éléments dans une seule puce, il suffit d'utiliser un élément <bloc> sans attribut style, comme le montre l'exemple suivant: Exemple <liste>
<p>Première ligne de la liste</p>
<p>Deuxième ligne de la liste</p>
<bloc>
<p>Troisième ligne de la liste, dans un bloc</p>
<p>Quatrième ligne de la liste</p>
</bloc>
<p>Dernière ligne de la liste</p>
</liste>Ce qui donne :
Imbrication des listesLes listes peuvent être imbriquées les unes dans les autres, comme le montre l'exemple suivant: <liste puce="flèche">
<p>Première ligne</p>
<liste puce="carré">
<p>point 1</p>
<p>point 2</p>
<p>point 3</p>
</liste>
<p>Deuxième ligne</p>
</liste>Ce qui donne :
On remarque que la deuxième ligne possède deux puces, Pour éviter cela, il vaut mieux utiliser un élément <bloc> (sans attribut style): <liste puce="flèche">
<bloc>
<p>Première ligne</p>
<liste puce="carré">
<p>point 1</p>
<p>point 2</p>
<p>point 3</p>
</liste>
</bloc>
<p>Deuxième ligne</p>
</liste>Ce qui donne (la première puce en forme de flèche portera uniquement sur le bloc):
Section optionnelle dans une listeUne partie de la liste peut être affichée de manière optionnelle, grâce à un élément <section> placé dans l'élément <liste>. Pour plus d'information, consultez la documentation consacrée aux sections optionnelles. |
