Aller au contenu

problème avec liste imbriquée css


flux37

Sujets conseillés

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é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;

}

Lien vers le commentaire
Partager sur d’autres sites

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 :

 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 ;)

Ce serait mieux d'utiliser les balises [ CODE ] [ / CODE ] pour présenter du code...Merci

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...