Comment Supprimer, Remplacer ou Styler Les Puces De la Liste Avec CSS

Table de Contenus

Comment Créer une Liste sans Puces

Dans quelques cas, vous aurez besoin de supprimer les puces/style des listes ordonnées (<ol>) et non ordonnées(<ul>). Supprimer les puces des listes HTML, ce n'est pas diificile à faire. On peut le faire à l'aide des propriétés CSS list-style ou list-style-type.

Votre code ressemblera à cela:

ul {
  list-style-type: none;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ul {
        list-style: none;
      }
      ol {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Liste non ordonnée</h2>
    <ul>
      <li>Élément de liste 1</li>
      <li>Élément de liste 2</li>
      <li>Élément de liste 3</li>
    </ul>
    <h2>Liste ordonnée</h2>
    <ol>
      <li>Élément de liste 1</li>
      <li>Élément de liste 2</li>
      <li>Élément de liste 3</li>
    </ol>
  </body>
</html>

Si vous voulez avoir une liste ou un élément de la liste, ne pas avoir des puces ou des nombres, Vous feriez mieux d'appliquer class qui doit être utilisé chaque fois lorsque vous devez supprimer les puces.

Ici, nous allons avoir une classe nommée "nolist" pour les listes ordonnées, qui peut être utilisée à chaque fois que vous auriez besoin à l'avenir.

Vous pouvez également définir la classe à chaque élément la liste séparément (<li>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .nolist {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Liste non ordonnée</h2>
    <ul>
      <li>Élément de liste 1</li>
      <li class="nolist">Élément de liste 2</li>
      <li>Élément de liste 3</li>
    </ul>
    <h2>Liste ordonnée</h2>
    <ol class="nolist">
      <li>Élément de liste 1</li>
      <li>Élément de liste 2</li>
      <li>Élément de liste 3</li>
    </ol>
  </body>
</html>

Comment Remplacer les Puces de la Liste avec des Images

CSS peut être utilisé pour convertir les puces de la liste aux séquences ou cercles, mais cela donne un peu de contrôle sur leur apparence ou location. Le changement des puces de la liste standarde HTML aux images est un moyen incroyable pour les connecter au sujet de votre site web et rendre votre site visuellement plus attrayant.

Il y a deux moyens de définir des images pour les éléments de la liste:

  1. Utilisez list-style-type pour remplacer les puces HTML avec des images graphiques. De plus, dans la plupart des navigateurs modernes, le placement de ces images est is inconséquent. Il y a aussi un très petit contrôle sur le proximité des puces aux éléments de la liste.

Les puces HTML peuvent être remplacés par des images en utilisant list-style-image. Cependant, le placement de ces images est inconséquent à travers la plupart des navigateurs.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ul {
        list-style-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png");
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Élément de liste 1</li>
      <li>Élément de liste 2</li>
      <li>Élément de liste 3</li>
    </ul>
  </body>
</html>
  1. Une meilleure variante est l'utilisation des images de l'arrière-plan pour les puces. Alors, voyons comment cela est fait pas-à-pas:
  • Créer une liste simple non ordonnée
  • Supprimer les puces avec list-style-type: none
  • Supprimer le remplissage et les marges

Les listes HTML standardes ont un nombre certain de l'indentation gauche. Le nombre se différencie sur chaque navigateur. Quelque navigateurs utilisent le remplissage (padding) (Mozilla, Safari) et d'autres utilisent les marges (Internet Explorer, Opera) pour définir le nombre de l'indentation.

Pour supprimer l'indentation gauche constamment à travers tous les navigateurs, définissez padding et margin à "0" pour l'élément <ul> comme cela:

ul {
  padding: 0;
  margin: 0;
}
  • Ajoutez votre propre indentation

Dans le cas où l'indentation gauche est requise, il est recommandé d'utiliser margin-left. Comme padding est actuellement définie à "0", un tour exacte peut être défini pour la marge gauche qui sera constante à travers tous les navigateurs. 

margin-left: 1em;
  • Ajoutez une image de l'arrière-plan

Utilisez la propriété CSS background-image pour ajouter une image de l'arrière-plan pour l'élément <li>. Donc, l'image de l'arrière-plan sera répétée à travers l'arrière-plan de chaque élément de la liste, qui n'aura pas une bonne apparence.

  • Définissez no-repeat

Alors, pour que l'image de l'arrière-plan arrête de répéter sous les éléments de la liste, définissez la propriété background-repeat à "no-repeat". Il y a maintenant seule une image par chaque élément de la liste, mais il y a un besoin d'être positionné.

li {
  background-image: url(star.png);
  background-repeat: no-repeat;
}
  • Positionnez l'image de l'arrière-plan

Utilisez la propriété CSS background-position pour définir la position des images de l'arrière-plan pour qu'elles puissent aller avec les textes.

Les images sont maintenant lignées horizontalement avec le contenu. Cependant, le contenu est en haut des images.

background-position: 1px;
  • Déplacez le contenu

Pour déplacer le contenu de l'image de l'arrière-plan, appliquez padding-left à l'élément <li>. Dans ce cas, "20px" a été utilisé. Comme avec l'alignement vertical, le remplissage de la liste sera détérminé par la taille de votre image.

padding-left: 20px;

Maintenant voyons à quoi va ressembler l'exemple complèt:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      li {
        background-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png");
        background-repeat: no-repeat;
        background-position: 1px;
        padding-left: 20px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Verte</li>
      <li>Bleu</li>
      <li>Jaune</li>
      <li>Rouge</li>
    </ul>
  </body>
</html>
Il est aussi possible d'avoir une image de l'arrière plan différente pour chaque élément de la liste. Ajoutez les classes et définissez l'image de l'arrière-plan pour chaque classe.

Comment Créer les Listes Horizontales

Créer les listes horizontales, ce n'est pas quelque chose très difficile. C'est un bon moyen de faire agir comme boutons et menus de navigation les puces. Il existe beaucoup de méthodes qui peuvent être utilisés pour créer une liste horizontale. La chose principale à définir est display: inline, définie pour l'élément <li>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #container ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        text-align: center;
      }
      #container ul li {
        display: inline;
      }
      #container ul li a {
        text-decoration: none;
        padding: 5px 20px;
        color: #fff;
        background-color: #1c87c9;
      }
      #container ul li a:hover {
        color: #fff;
        background-color: #369;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <ul>
        <li><a href="#">Acceuil</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">À propos</a></li>
      </ul>
    </div>
  </body>
</html>

Comment Styler les Listes

Stylez votre listes avec les couleurs spécifiant color et background-color pour elles:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      ol {
        background: #1c87c9;
        padding: 20px;
        color: cyan;
      }
      ul {
        background: #8ebf42;
        padding: 20px;
      }
      ol li {
        background: #666;
        padding: 5px;
        margin-left: 35px;
      }
      ul li {
        background: #eee;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Café</li>
      <li>Thé</li>
      <li>Lait</li>
    </ol>
    <ul>
      <li>Café</li>
      <li>Thé</li>
      <li>Lait</li>
    </ul>
  </body>
</html>

Créez une liste avec les bordures de largeur complète en utilisant les propriétés CSS border et border-bottom :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ul {
        border: 1px solid #ddd;
        background-color: #eee;
        list-style-type: none;
        padding: 0;
      }
      ul li {
        padding: 8px 10px;
        border-bottom: 1px solid #ddd;
      }
      ul li:last-child {
        border-bottom: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Café</li>
      <li>Thé</li>
      <li>Lait</li>
    </ul>
  </body>
</html>

Ajoutez une bordure aux éléments de votre liste en utilisant la propriété CSS border-left:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ul {
        border-left: 5px solid #8ebf42;
        background-color: #eee;
        list-style-type: none;
        padding: 10px 20px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <ul>
        <li>Café</li>
        <li>Thé</li>
        <li>Lait</li>
      </ul>
    </div>
  </body>
</html>

Pour avoir différents puces dans une liste, vous devez appliquer class à chaque élément de la liste et spécifier list-style pour eux séparément.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .disc {
        list-style: disc;
      }
      .square {
        list-style: square;
      }
      .armenian {
        list-style: armenian;
      }
      .lower-greek {
        list-style: lower-greek;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="disc">Disc bullet</li>
      <li class="square">Square bullet</li>
      <li class="armenian">Armenian bullet</li>
      <li class="lower-greek">Lower-greek bullet</li>
    </ul>
  </body>
</html>

Exemple de Tout les Marqueur de Liste

Ici, vous trouverez un exemple qui contient tous les différents types que les listes ordonnées (<ol>) et non ordonnées (<ul>) ont:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ul.a {
        list-style-type: circle;
      }
      ul.b {
        list-style-type: square;
      }
      ol.c {
        list-style-type: upper-roman;
      }
      ol.d {
        list-style-type: lower-alpha;
      }
      ol.e {
        list-style-type: armenian;
      }
      ol.f {
        list-style-type: decimal;
      }
      ol.g {
        list-style-type: cjk-ideographic;
      }
      ol.h {
        list-style-type: decimal-leading-zero;
      }
      ol.i {
        list-style-type: georgian;
      }
      ol.j {
        list-style-type: hebrew;
      }
      ol.k {
        list-style-type: hiragana;
      }
      ol.l {
        list-style-type: hiragana-iroha;
      }
      ol.m {
        list-style-type: katakana;
      }
      ol.n {
        list-style-type: katakana-iroha;
      }
      ol.o {
        list-style-type: lower-greek;
      }
      ol.p {
        list-style-type: lower-latin;
      }
      ol.q {
        list-style-type: lower-roman;
      }
      ol.r {
        list-style-type: none;
      }
      ol.s {
        list-style-type: upper-alpha;
      }
      ol.t {
        list-style-type: upper-latin;
      }
    </style>
  </head>
  <body>
    <h2>Exemples des listes non ordonnées:</h2>
    <h3>Cercle</h3>
    <ul class="a">
      <li>New York</li>
      <li>Las Vegas</li>
      <li>Washington</li>
    </ul>
    <h3>Square</h3>
    <ul class="b">
      <li>San Francisco</li>
      <li>Los Angeles</li>
      <li>Miami</li>
    </ul>
    <h2>Exemples des listes ordonnées:</h2>
    <h3>Upper-roman</h3>
    <ol class="c">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>Londre</li>
    </ol>
    <h3>Lower-alpha</h3>
    <ol class="d">
      <li>Dubai</li>
      <li>Abu Dhabi</li>
      <li>Qatar</li>
    </ol>
    <h3>Armenian</h3>
    <ol class="e">
      <li>Yerevan</li>
      <li>Paris</li>
      <li>Rome</li>
    </ol>
    <h3>Decimal</h3>
    <ol class="f">
      <li>Sydney</li>
      <li>Hong Kong</li>
      <li>Moscou</li>
    </ol>
    <h3>Cjk-ideographic</h3>
    <ol class="g">
      <li>Kiev</li>
      <li>Saint-Petersburg</li>
      <li>Tula</li>
    </ol>
    <h3>Decimal-leading-zero</h3>
    <ol class="h">
      <li>Bangkok</li>
      <li>Gyumri</li>
      <li>Valencia</li>
    </ol>
    <h3>Georgian</h3>
    <ol class="i">
      <li>Madrid</li>
      <li>Barcelona</li>
      <li>Prague</li>
    </ol>
    <h3>Hebrew</h3>
    <ol class="j">
      <li>Jerusalem</li>
      <li>Toronto</li>
      <li>Prague</li>
    </ol>
    <h3>Hiragana</h3>
    <ol class="k">
      <li>Cairo</li>
      <li>Tokyo</li>
      <li>Athens</li>
    </ol>
    <h3>Hiragana-iroha</h3>
    <ol class="l">
      <li>Tehran</li>
      <li>Tavriz</li>
      <li>Tel Aviv</li>
    </ol>
    <h3>Katakana</h3>
    <ol class="m">
      <li>Munich</li>
      <li>Berlin</li>
      <li>Bavaria</li>
    </ol>
    <h3>Katakana-iroha</h3>
    <ol class="n">
      <li>Brussels</li>
      <li>Istanbul</li>
      <li>Sydney</li>
    </ol>
    <h3>Lower-greek</h3>
    <ol class="o">
      <li>Seville</li>
      <li>Granada</li>
      <li>Venice</li>
    </ol>
    <h3>Lower-latin</h3>
    <ol class="p">
      <li>Budapest</li>
      <li>Vienna</li>
      <li>Amsterdam</li>
    </ol>
    <h3>Lower-roman</h3>
    <ol class="q">
      <li>Buenos Aires</li>
      <li>Rio de Janeiro</li>
      <li>San Paolo</li>
    </ol>
    <h3>None</h3>
    <ol class="r">
      <li>Vilnius</li>
      <li>Tallinn</li>
      <li>Riga</li>
    </ol>
    <h3>Upper-alpha</h3>
    <ol class="s">
      <li>Montreal</li>
      <li>Melbourne</li>
      <li>Edinburgh</li>
    </ol>
    <h3>Upper-latin</h3>
    <ol class="t">
      <li>Dublin</li>
      <li>Mexico</li>
      <li>Florence</li>
    </ol>
  </body>
</html>