28173 sujets

CSS et mise en forme, CSS3

[résolu] Petite problématique de "ciblage" css

Hello, j'ai CE code :
<ul>
	<li id="onglet1" class="current_page_item"><a href="#">Festival</a>
		<ul id="smenu1">
			<li class="page_item"><a title="Accueil" href="http://www.monsite.com/?language=fr">Accueil</a></li>
			<li class="page_item"><a title="Compétition" href="http://www.monsite.com/?page_id=189&language=fr">Compétition</a></li>
			<li class="page_item"><a title="Galerie photo" href="http://www.monsite.com/?page_id=208&language=fr">Galerie photo</a></li>
			<li class="page_item"><a title="Infos pratiques" href="http://www.monsite.com/?page_id=160&language=fr">Infos pratiques</a></li>
			<li class="page_item current_page_item"><a title="Invités" href="http://www.monsite.com/?page_id=171&language=fr">Invités</a></li>
			<li class="page_item"><a title="Programme" href="http://www.monsite.com/?page_id=161&language=fr">Programme</a></li>
			<li class="page_item"><a title="Pros" href="http://www.monsite.com/?page_id=194&language=fr">Pros</a></li>
		</ul>
</li>


Cela correspond à UN onglet (l'onglet actif) de mon menu.
Comme vous pouvez le voir, il y a deux fois la classe current_page_item : une fois pour l'onglet, et une fois pour son sous-menu actif.

Maintenant, j'aimerais que l'onglet lui-même et son sous-menu actif soient soulignés.

J'ai essayé 
#menu .current_page_item ul li{
text-decoration:underline;
}

mais tous les sous-menus se soulignent... Comment faire pour cibler efficacement les deux occurences que je veux souligner ?

Merci bcp !
Modifié par gordie (10 Nov 2007 - 17:38)
La classe appartient au LI et non au menu, il faut donc faire :


#menu ul li.current_page_item {
	text-decoration: underline;
}


Smiley cligne
Modifié par Gaylord.P (10 Nov 2007 - 14:59)
gordie a écrit :
Comment faire pour cibler efficacement les deux occurences que je veux souligner ?

Le sélecteur d'enfant direct est ton ami (… mais pas celui d'IE6 par contre) :
.current_page_item > a {text-decoration:underline}
On peut sans doute faire quelque chose comme ça:
#menu ul li.current_page_item a {
text-decoration: underline;
}
#menu ul li.current_page_item ul li a {
text-decoration: none;
}
#menu ul li.current_page_item ul li.current_page_item a {
text-decoration: underline;
}

C'est un peu excessif, et le sélecteur d'enfant serait plus intéressant, mais cette solution devrait être compatible IE6. Smiley cligne
je connaissais pas ce sélecteur d'enfant.... dommage que ça marche pas sur IE, du coup ça vaut même pas la peine de s'y intéresser Smiley decu

Merci pour la dernière soluce, elle fonctionne.
gordie a écrit :
je connaissais pas ce sélecteur d'enfant.... dommage que ça marche pas sur IE, du coup ça vaut même pas la peine de s'y intéresser Smiley decu

Ce n'est pas mon avis, mais ton choix est tout à fait respectable. Smiley jap
gordie a écrit :
dommage que ça marche pas sur IE, du coup ça vaut même pas la peine de s'y intéresser Smiley decu

Ça marche sur IE 7 et tous les autres navigateurs modernes. C'est déjà pas mal, non? Et d'ici quelques années, IE7 sera assez largement devant IE6. Smiley cligne
Donc si, ça vaut la peine de s'y intéresser, de même qu'au sélecteur d'attribut par exemple. Et ça vaut la peine de se pencher sur la question de dégradation gracieuse.
Sujet clos
Aller à