28173 sujets

CSS et mise en forme, CSS3

Personnaliser les puces par défaut

Bonjour,

J'aurais voulu savoir comment personnaliser les puces par défaut en css. Sur mon site, par défaut la puce de premier niveau il me met un rond plein, celle de deuxième niveau un rond vide. Je voudrais que la puce de premier niveau soit par exemple un petit carré plein, celle de deuxième niveau un tiret, ...

Merci
De nombreux sujets abordent la question, une petite recherche te mettra rapidement sur la piste des puces attribuées grâce à la propriété background.
Mais en fait je ne cherche pas à attribuer une image spéciale à telle ou telle puce. Je veux bien utiliser les images des puces qui existent déjà dans le système, mais je veux modifier le type de puce en fonction du niveau, genre que les puces de niveau 1 utilisent square, que celles de niveau 2 utilisent autre chose, ...

Je ne pense pas que la propriété background réponse à ma problématique, je n'ai pas envie de devoir mettre une classe à chaque élément de ma liste...
En utilisant convenablement les sélecteurs css, tu n'as pas à appliquer de classe à chaque élément de liste.
Si tu souhaites juste modifier le type de puces affichées par défaut en fonction de l'imbrication des listes, il te suffit de changer les propriétés list-style de chaque ul, tu pourras ainsi redéfinir les types de puces selon l'imbrication.
Bonjour,

Juste en CSS, on peut faire ceci:
ul {list-style-type: square;}
ul ul {list-style-type: disc;}
ul ul ul {list-style-type: circle;}

S'il s'agit uniquement des listes dans un bloc précis, on peut faire ceci:
div#contenu ul {list-style-type: square;}
div#contenu ul ul {list-style-type: disc;}
div#contenu ul ul ul {list-style-type: circle;}

Et s'il s'agit d'une méga-liste particulière:
ul#superliste {list-style-type: square;}
ul#superliste ul {list-style-type: disc;}
ul#superliste ul ul {list-style-type: circle;}


And voilà! Smiley smile
Sujet clos
Aller à