• JCE FR
    JCE, l'incontournable éditeur pour Joomla!
    Avec barre d'outils et gestionnaire de fichiers
    adaptables à des profils utilisateur différents.

Les listes

Introduction

Comme dans un logiciel de traitement de texte, il existe deux types de liste :

  • liste-pucesles listes à puces ;
  • liste-chronologiqueles listes chronologiques.

Les éditeurs web proposent par défaut les listes à puces et à numérotation. Certains proposent différents types de liste chronologique (voir plus bas).

Les niveaux

Les niveaux d'une liste s'appliquent par l’attribution d'un retrait.
retraits
Le retrait à gauche n'est possible qu'après avoir effectué un retrait à droite.
Vous pouvez effectuer autant de retraits que souhaité.

Liste à puces

La liste à puce permet de lister des éléments en les démarquant par une illustration et un retrait. L'illustration et la taille du retrait peuvent changer selon la feuille de style CSS de l'habillage du site.

  • Première ligne
  • Seconde ligne
  • Troisième ligne

La liste à puces a des illustrations différentes pour trois niveaux, le quatrième reprenant l'illustration du troisième.

  • Premier niveau
    • Second niveau
      • Troisième niveau
        • liste-puces-stylesQuatrième niveau

Vous pouvez changer l'illustration d'une puce par l'attribution d'un style xhtml qui parfois peut s'appliquer directement par l'éditeur.

  • Puce disque : style="list-style-type: disc;"
  • Puce cercle : style="list-style-type: circle;"
  • Puce carré : style="list-style-type: square;"

Une liste à puce est composée de deux balises imbriquées : ul qui représente le bloc de la liste, et li qui représente la puce.
Voici le code d'une liste à puce avec trois lignes au même niveau :

<ul>
<li>Première ligne</li>
<li>Seconde ligne</li>
<li>Troisième ligne</li>
</ul>

Lorsque un niveau (retrait) est ajouté, un nouveau bloc de liste (balise ul) s'imbrique dans celui du niveau précédent.
Voici le code d'une liste à puce avec trois lignes sur trois niveaux :

<ul><li>Premier niveau
<ul><li>Second niveau
<ul><li>Troisième niveau</li></ul>
</li></ul>
</li></ul>

Liste chronologique

La liste chronologique permet de lister des éléments en les démarquant par une illustration (des chiffres par défaut) et un retrait. La police d'écriture de l'illustration et la taille du retrait peuvent changer selon la feuille de style CSS de l'habillage du site.

  1. liste-chronologique-stylesPremière ligne
  2. Seconde ligne
  3. Troisième ligne

Vous pouvez changer l'illustration d'une liste chronologique par l'attribution d'un style xhtml qui parfois peut s'appliquer directement par l'éditeur.

Liste à chiffre romain en minuscule
style="list-style-type: lower-roman;

  1. Première ligne
  2. Seconde ligne
  3. Troisième ligne

Liste à chiffres romains en majuscule
style="list-style-type: upper-roman;"

  1. Première ligne
  2. Seconde ligne
  3. Troisième ligne

Liste à lettres de l'alphabet en minuscule
style="list-style-type: lower-alpha;"

  1. Première ligne
  2. Seconde ligne
  3. Troisième ligne

Liste à lettres de l'alphabet en majuscule
style="list-style-type: upper-alpha;"

  1. Première ligne
  2. Seconde ligne
  3. Troisième ligne

Liste à lettres de l'alphabet grec
style="list-style-type: lower-greek;"

  1. Première ligne
  2. Seconde ligne
  3. Troisième ligne

Une liste chronologique est composée de deux balises imbriquées : ul qui représente le bloc de la liste, et ol qui représente l'illustration.
Voici le code d'une liste chronologique avec trois lignes au même niveau :

<ul>
<ol>Première ligne</ol>
<ol>Seconde ligne</ol>
<ol>Troisième ligne</ol>
</ul>

Lorsque un niveau (retrait) est ajouté, un nouveau bloc de liste (balise ul) s'imbrique dans celui du niveau précédent.
Voici le code d'une liste chronologique avec trois lignes sur trois niveaux :

<ul><ol>Premier niveau
<ul><ol>Second niveau
<ul><ol>Troisième niveau</ol></ul>
</ol></ul>
</ol></ul>

Imprimer E-mail