Version complète: sur le forum Webmaster Hub : problème avec liste imbriquée css
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
flux37
bonjour,

j'essaye de faire une liste imbriquée avec une image en guise de puce..
Tout se passe bien sauf que la puce apparait même sur les li de niveau 2..

Je voudrais qu'elles n'apparaisse que sur le niveau 1 .. sur moteur de recherche et répertoire, plus précisément.. Or , en l'état toutes les <Li> ont une puce



Quelqu'un pourrait -il m'aider ?


merci bc bc d'avance...



----------------
code xhtml :
----------------



<ul class="niveau1">

<li >moteurs de recherche

<ul class="niveau2">
<li>Google</li>
<li>Altavista</li>
<li>Fireball</li>
</ul>

</li>


<li>r&eacute;pertoires

<ul class="niveau2">
<li >Yahoo</li>
<li>Tiscali.fr</li>
<li>Chez.com</li>
</ul>

</li>

<li>autre chose</li>

<li>encore autre chose</li>

</ul>


------
css :
------



ul.niveau1 {
list-style-image: url(images/flechecontenu.gif);
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color:#275182;


}

ul.niveau1 li {
list-style-image: url(images/flechecontenu.gif);
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color:#ccc;
font-weight: normal;
color:#275182;

}
ul.niveau2 {

list-style-type: none;
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color:#666;
}
ul.niveau2 li {
list-style-type:none;
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight:normal ;
color:#595959;
}
TheRec
Bonjour,

Ton problème c'est qu'en CSS les propriétés sont héritées (pas toutes, mais beaucoup)... en l'occurrence "list-style-image" est héritée...donc si tu donne ce paramètre à un parent qui le supporte, il sera la valeur par défaut pour ses enfants...

Donc, pour le <li> de la liste de niveau2 :
CODE
ul.niveau2 li {
...
list-style-image: none;
...
}

Un conseil toutefois, évite de répéter des informations comme list-style-* pour <ul> et <li> ...tu souhaites affecter une puce à l'élément de la liste (<li> -> List Item) donc spécifie ces information pour cet élément...et pas pour l'élément <ul>...ça évite des "doublons" dans le code...et quand tu cherche à résoudre un problème ça devient ingérable sans ça wink.gif

Ce serait mieux d'utiliser les balises [ CODE ] [ / CODE ] pour présenter du code...Merci
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.