Comment dresser les puces ?

[PierreFox]

Bonjour,

J'ai un petit soucis avec une liste toute bête de la forme :

Code : Tout sélectionner

<ul>
  <li>Titre1
    <ul><li>Sous-partie1</li>
        <li>Sous-partie2</li>
    </ul>
  </li>
		
  <li>Titre2
    <ul><li>Sous-partie1</li>
        <li>Sous-partie2</li>
    </ul>
  </li>

...

</ul>

J'aimerais tout simplement personaliser toutes les puces des TitreX mais que les puces des sous-parties ne soit pas affectés, comment faire ?

Si j'applique une classe (.maclasse) sur chaque liste de Titre, la puce est automatiquement répercuté sur les Sous-partie, du fais de l'effet de cascade...

Code : Tout sélectionner

.maclasse {
	list-style-image: url(mapuce.png);
}

Merci de votre aide.



Message envoyé avec : Mozilla/5.0 (Windows; U; Win 9x 4.90; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

[calimo]

Tu peux annuler l'effet avec un

Code : Tout sélectionner

.maclasse li {
   list-style-type:disc;
}

[PierreFox]

Ca ne fonctionne pas

Ma puce apparait toujours dans les Sous-parties

Message envoyé avec : Mozilla/5.0 (Windows; U; Win 9x 4.90; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

[Asumbaa]

Bonjour,

Et un

Code : Tout sélectionner

list-style-image: none;

sur .maclasse li ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

[PierreFox]

Non plus... toujours le même résultat : ma puce personalisée apparait aussi dans les Sous-parties

Message envoyé avec : Mozilla/5.0 (Windows; U; Win 9x 4.90; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

[calimo]

On peut voir la page ?

[PierreFox]

On peut voir la page ?

Oui bien sùr elle est ici

Message envoyé avec : Mozilla/5.0 (Windows; U; Win 9x 4.90; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

[calimo]

Ben visiblement avec un

Code : Tout sélectionner

.musique li {
   list-style-image: none;
}

ça fonctionne bien…

PS : plutôt que de mettre 20 classes sur chaque li, tu peux également n'en mettre qu'une seule sur le ul

[PierreFox]

Ben visiblement avec un

Code : Tout sélectionner

.musique li {
   list-style-image: none;
}

ça fonctionne bien…

Ah oui ça fonctionne maintenant... manifestement j'ai eu un problème de cache sur Firefox hier

PS : plutôt que de mettre 20 classes sur chaque li, tu peux également n'en mettre qu'une seule sur le ul

Oui ce serait plus judicieux mais comment faire après pour que la puce personalisée s'affiche car en mettant ma classe sur le ul je n'ai plus aucune puce du fait du :

Code : Tout sélectionner

.musique li {
   list-style-image: none;
}

Au passage si vous auriez une doc css qui explique les ".maclasse mabalise" car je n'ai pas très bien comprit le procédé de même le fait d'ajouter des >.
Dans la même série peut-on appliquer une classe sur un niveau supérieur en indiquant que certains niveaux inférieurs ne doivent pas appliquer la classe sans rajouter une classe en niveau inférieur qui dit le contraire ? (j'ai du mal à l'exprimer, désolé).

Message envoyé avec : Mozilla/5.0 (Windows; U; Win 9x 4.90; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

[calimo]

Ben comme le .maclasse est sur le ul, le li est un enfant :

Code : Tout sélectionner

.maclasse li{
   list-style-image: url(mapuce.png);
}

Rien de mieux que la spécification sur les sélecteurs CSS2 : http://www.yoyodesign.org/doc/w3c/css2/selector.html
C'est un peu dense mais ça reste parfaitement compréhensible par n'importe quel humain doté d'un minimum de persévérence et qui ne l'aborde pas en disant «c'est incompréhensible» (évidemment si tu pars comme ça, ça le devient)

Il doit certainement y avoir quelques tutos auxquels je ne pense pas en ce moment précis.

[Asumbaa]

Bonjour,

Pour la doc il y a aussi le Wiki Mediabox que je trouve sympa (mais moins complet)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

[PierreFox]

Rien de mieux que la spécification sur les sélecteurs CSS2 : http://www.yoyodesign.org/doc/w3c/css2/selector.html
C'est un peu dense mais ça reste parfaitement compréhensible par n'importe quel humain doté d'un minimum de persévérence et qui ne l'aborde pas en disant «c'est incompréhensible» (évidemment si tu pars comme ça, ça le devient)

Impeccable, c'est dense mais complet et c'est l'essentiel, voilà ce que je viens de pondre, ici.

Avec un css de la forme :

Code : Tout sélectionner

.musique li {
	list-style-image: url(images/note.gif);
}
.musique li>ul li {
   list-style-image: none;
}

A moins que vous n'ayez une autre méthode à me proposer ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Win 9x 4.90; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

[Asumbaa]

C'est une solution élégante, en effet.

Le problème, c'est qu'Internet Explorer ne comprend pas encore le >... Ca viendra avec IE7, si j'ai bien lu la doc.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

[FF_Olivier]

Le problème, c'est qu'Internet Explorer ne comprend pas encore le >... Ca viendra avec IE7, si j'ai bien lu la doc.

Euh, tu es sûr, c'est pourtant le b.a.-ba du CSS
Essaie en séparant bien avec des blancs :

Code : Tout sélectionner

li > ul

[Asumbaa]

tu es sûr, c'est pourtant le b.a.-ba du CSS

Je crois bien... La page de PierreFox sous IE donne ses sous-li avec la puce en tout cas. A voir avec les espaces, en effet !

PS : sûre


Edit : sur cette pagedu wiki, on peut lire :

Attention, cet élément n’est pas reconnu par Internet Explorer.

(bon, c'est pas un élément, mais ils parlent bien de >)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2