couleur [CSS]

Version imprimable

couleur [CSS]

Bonjour

j'ai fait un menu qui lorsqu'on arrive sur une rubrique, le fond devient jaune. j'ai employé le css dont voici le code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 #menu { width: 100%; margin-top:50px; margin-left:5px; padding: 0; } #menu A { float: left; width: 150px; display: block; padding:4px; color:#000000; background-color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; border-bottom:1px solid #000000; text-decoration: none; } #menu A:hover { text-decoration: none; background-color:#FFFF00; color: #000000; }
cela marche très bien mais je voudrais ajouter une petite chose mais je sais pas si c'est possible

je voudrais que pour chaque rubrique du menu la couleur de fond soit différente

merci pour votre aide

06/10/2005, 10h18
SpaceFrog

dans la balise de la rubrique ...
06/10/2005, 10h30
ph_anrys
Je ne comprends pas tres bien peux tu me donner plus d'explication car quand on change la couleur c'est la meme couleur pour tous
Code:

1 2 3 4 5 6 7 #menu A:hover { text-decoration: none; background-color:#FFFF00; color: #000000; }
c'est la couleur de fond que je survole que je veux changer avec une couleur differente pour chaque rubrique

merci

Salut !!

Tu affectes une classe ou un identifiant à chaque balise <a>, et dans le css tu défini le hover, ex :

Code:

1
2
3
4
5
6
 
<ul id="menu">
  <li><a class="rubrique1" href="#"></a></li>
  <li><a class="rubrique2" href="#"></a></li>
  <li><a class="rubrique3" href="#"></a></li>
</ul>

Et :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
.rubrique1:hover{
  background: red;
}
 
.rubrique2:hover{
  background: green;
}
 
.rubrique3:hover{
  background: blue;
}

:wink:

Ou comme le dis SF directement le style dans la balise:
Code:

1 2 3 4 5 6 <ul id="menu"> <li><a href='#' class="rubrique" style=":hover {background-color:teal};">AA</a></li> <li><a href='#' class="rubrique" style=":hover {background-color:yellow};">BB</a></li> <li><a href='#' class="rubrique" style=":hover {background-color:pink};">CC</a></li> </ul>
C'est conforme à la norme W3C (http://www.w3.org/TR/2000/WD-css-style-attr-20001025), mais ça n'a l'air de marcher ni sous IE ni sous FF. Quelqu'un a réussi à faire marcher ce genre de choses :?:

06/10/2005, 11h48
Tdeny

Fais le en DHTML...

Code:

onmouseover="this.style.backgroundColor='#FF0000';" onmouseout="this.style.backgroundColor='#FFFF00';"