Discussion :

[gilbertbicot]

Bonjour,
je fais un menu css avec une couleur de texte pour chaque bouton.
a la base les boutons sont en blanc et je voudrais qu'il se colore quand je les survolle et qu'il garde leur coloration tant que je suis sur la page active.
lorsque je survolle mon bouton, la bonne coloration s'affiche.
mon probleme est que mes bouton on la bonne coloration quand je les survolle mais une fois cliqués il gardent tous la meme couleur que le dernier bouton que j'ai declaré en css
voici mon code :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
div#header .item2 a:hover , #current a{
	color: #FF7900;
} 
 
div#header .item3 a:hover ,  #current  a{
	color: #00C0B5;
} 
 
div#header .item4 a:hover ,  #current  a{
	color: #8E258D;
} 
div#header .item5 a:hover ,  #current  a{
	color: #96BD0D;
} 
div#header .item6 a:hover ,  #current a{
	color: #E00034;
} 
div#header .item7 a:hover , #current a{
	color: #F4587A;
} 
div#header .item8 a:hover ,  #current a{
	color: #7577C0;
} 
div#header .item9 a:hover , #current a{
	color: #827663;
} 
div#header .item10 a:hover , #current a{
	color: #0083A7;
}

merci pour vos réponses

[devyan]

Salut,

Avant tout, peux-tu placer tes exemples de code html et css dans un bloc CODE ?

Pour obtenir ce que tu demandes il faut indiquer en plus de #current l'item sélectionné dans tes déclarations css. Sinon tu auras toujours la couleur de la dernière déclaration (celle de item10)

Code exemple :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
div#header .item2 a:hover , #current.item2 a{
color: #FF7900;
}

div#header .item3 a:hover , #current.item3 a{
color: #00C0B5;
}
...

#current.itemX sont collé (pas d'espace) pour indiquer qu'ils s'appliquent au même élément (qui a id="current" ET class="itemX")

[gilbertbicot]

merci devyan pour la rapidité de la reponse, ça marche par contre pour poster mon code dans une fenetre, ca je n'ai pas trouvé
en tout cas merci salut

[c_s_s]

devyan, comment tu sais que #current est placé avant .item sans voir le code HTML ?

Le code pourrait être comme ça aussi (par exemple) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="item2">
	<span id="current">
		<a href="">Lien</a>
	</span>
</div>

Dans ce cas, il faudrait mettre dans la feuille de style :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div#header .item2 a:hover , .item2 #current a {
color: #FF7900;
}

En fait, tout dépend de la structure du code HTML.

[devyan]

devyan, comment tu sais que #current est placé avant .item sans voir le code HTML ?

En fait je ne sais pas et ne fait que supposer d'après le peu d'informations fournies
Mais j'ai demandé une boule de cristal au père-noël et apparemment elle fonctionne bien

Le code pourrait être comme ça aussi (par exemple) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="item2">
	<span id="current">
		<a href="">Lien</a>
	</span>
</div>

Dans ce cas, il faudrait mettre dans la feuille de style :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div#header .item2 a:hover , .item2 #current a {
color: #FF7900;
}

En fait, tout dépend de la structure du code HTML.

Tout à fais d'accord avec toi

[devyan]

merci devyan pour la rapidité de la reponse, ça marche par contre pour poster mon code dans une fenetre, ca je n'ai pas trouvé
en tout cas merci salut

C'est l'option # dans la barre d'outils de l'éditeur de messages

[c_s_s]

Mais j'ai demandé une boule de cristal au père-noël et apparemment elle fonctionne bien

Tu me la prêteras de temps en temps ?