[Résolu] Liste avec 2 puces différente

Bonjour à tous cher confrere nerdz,

j'aimerais réaliser une liste comme celle sur mon dessin en avec l'aide d'une css

2 puce différente dans la meme liste (sous liste) mais avec une autre puce



merci à l'avance les chummy's
Modifié par bensti (14 Oct 2005 - 15:27)

Bonjour,

Si tu souhaites avoir deux types de puces différentes pour tes listes imbriquées, tu peux soit utiliser les puces normales, soit des puces graphiques.

Pour des puces graphiques comme le sous-entend ton illustration (une image en arrière-plan d'un item de liste par exemple) tu peux utiliser les sélecteurs descendants en css. C'est à dire atteindre un li qui est dans un li (où li est un descendant de son ancêtre li):

<ul>
   <li>Item
        <ul>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
        </ul>
    </li>
    <li>item</li>
    <li>item</li>
</ul>

Pour appliquer un style particulier à un li enfant d'un autre li:

ul{list-style:none;}
li{background: url(monimage1.png) no-repeat 0 0; text-indent: 18px;}
li li{background: url(monimage2.png) no-repeat 0 0; text-indent: 18px;}

Voir tous les sélecteurs css.

ps: je déplace dans le salon css.
ps2: c'est quoi un chummy's ?

merci j'avais pas penser que je pouvrais mettre un #menu li li {...}

god bless you
amen