Mise en forme des listes via CSS

En XHTML, on a appris les différents types de liste et les différentes balises pour les définir.

  • Liste non numérotée
  • Liste numérotée
  • Liste alphabétique

Maintenant, nous allons nous pencher plutôt vers la mise en forme de ces listes.

Les listes à puces

Les listes à puces sont des listes non numérotées. A la place des numéros, on met des petits symboles appelés 'puces'. En CSS il est possible d'avoir différentes formes de puces grâce à la propriété list-style-type. Les formes varient en fonction de la valeur de la propriété, en voici quelques exemples :

  • list-style-type: disc /* petit cercle plein */
  • list-style-type: circle /* petit cercle vide */
  • list-style-type: square /* petit carré plein */

La valeur par défaut de cette propriété est none.

Code CSS :

.disc {
list-style-type:disc
}

.circle
{ list-style-type:circle;
}

.square {
list-style-type:square;
}

Code XHTML :

<ul class="disc" >
  <li>liste 1 avec disc</li>
  <li>liste 2 avec disc</li>
</ul>

<ul class="circle" >
  <li>liste 1 avec circle</li>
  <li>liste 2 avec circle</li>
</ul>

<ul class="square" >
  <li>liste 1 avec square</li>
  <li>liste 2 avec square</li>
</ul>

Les listes numérotées et alphabétiques

Pour faire des listes numérotées et alphabétiques il suffit de remplacer < ul > par < ol> en XHTML. Toujours avec la propriété list-style-type on peut mettre des types de chiffre ou de caractère de notre choix comme des :

  1. Chiffres romains minuscules (list-style-type: lower-roman)
  2. Chiffres romains majuscules (list-style-type: upper-roman)
  3. Numérotation normale (list-style-type: " decimal type")
  4. Alphabet latin majuscule (list-style-type: upper-roman)
  5. Alphabet latin minuscule (list-style-type: lower-roman)

Code XHTML :

<ol style="list-style-type: lower-roman;" >
  <li>liste 1 avec chiffre romain en minuscules</li>
  <li>liste 2 avec chiffre romain en minuscules</li>
</ol>

<ol style="list-style-type: upper-roman;" >
  <li>liste 1 avec chiffre romain en majuscules</li>
  <li>liste 2 avec chiffre romain en majuscules</li>
</ol>

Listes avec images

A la place des puces et des numéros, il est aussi possible de mettre des images. Pour cela, utilisez la propriété list-style-image en mettant l'URL de l'accès local. Au cas où vous voulez désactiver l'affichage de l'image mettez none à la place de l'URL.

Code CSS :

.listeimage1 {
list-style-image: url("images/liste.gif");
}

Code XHTML :

<ul class="listeimage1">
  <li>liste 1 avec image en locale</li>
  <li>liste 2 avec image en locale</li>
</ul>

Le chemin de l'image peut aussi contenir des URL comme dans cet exemple :

Code CSS :

.listeimage2 {
list-style-image:url("http://www.votredomain.com/images/liste.gif" )
}

Code XHTML :

<ul class="listeimage2">
  <li>liste 1 avec image en ligne</li>
  <li>liste 2 avec image en ligne</li>
</ul>

Les navigateurs n'acceptent pas tous la propriété list-style-image. Afin de préserver l'affichage de la liste malgré tout, on peut ajouter un autre style liste qui servira de "style de secours". Ainsi, on ajoute dans le code, en bas de l'insertion d'image cette ligne : list-style-type: circle ; Des petits cercles s'afficheront à la place des images sur les navigateurs ne supportant pas la propriété list-style-image

Code CSS :

ul {
font-size:36px;
list-style-image: url (liste.gif);
list-style-type: circle ;
list-style-position: inside;
}

Position de la liste

list-style-position est la propriété pour spécifier l'emplacement de la liste par rapport à la bordure et au texte. Il peut y avoir deux valeurs possibles :

  • outside qui est la valeur par défaut
  • inside

Code CSS :

.bordure {
border: medium double red;
}

ul.inside {
font-size:36px;
list-style-type: circle ;
list-style-position: inside;
}
ul.outside {

font-size:36px;
list-style-type: circle;
list-style-position: outside;
}

Code XHTML :

<div class="bordure">
<ul class="inside" >
  <li>liste 1 inside</li>
  <li>liste 2 inside</li>
</ul>

<ul class="outside" >
  <li>liste 1 outside</li>
  <li>liste 2 outside</li>
</ul>
</div>

Observez dans l'exemple suivant que les listes avec list-style-position: inside; sont un peu plus décalées de la bordure gauche du div que les listes avec list-style-position: outside ;

Une question ? Venez la poser sur notre forum développement web !

A propos de l'auteur

Nicolas Galle

Nicolas Galle est développeur indépendant.

Newsletter Marketing

Vous consultez la page Liste CSS Ul, Li... Puce, Numérotée Et Alphabétique Ou Image Et Horizontal. Personnalisez vos listes avec CSS. Modifiez les puces et proposez l'image de votre choix. Utilisez aussi les puces numérotées et alphabétiques. Tuto sur la mise en forme de puce via CSS.