Liens css de couleurs différentes

Fermé
ducky - 17 janv. 2008 à 14:34
 Joe - 31 oct. 2008 à 12:32
Bonjour,

je voudrais savoir comment faire pour que dans une même page, la couleur des liens soit différente. quand je survole mon menu la couleur soit bleu, quand je survole mon sous menu ma couleur soit verte. J'ai fait un style css avec a:hover mais ca change pour toute la page.

merci

7 réponses

killermano66 Messages postés 233 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 25 novembre 2010 41
17 janv. 2008 à 14:41
Pour cela il faut que tu définisse une classe CSS, que tu lui donne un nom en quelques sorte. Je te met un exemple en dessous :

a:hover.couleur1 {
color:#9999ff;
}

et pour le déclarer dans ton lien tu met :
<a href="url_de_ta_page" style="couleur1">Lien 1</a>

Si j'avais appelé la classe couleur2, tu aurais mis style="couleur2" dans ton lien.

Voilà, en espérant t'avoir aidé.
2
Darkito Messages postés 1190 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 26 mai 2010 545
17 janv. 2008 à 14:42
Bonjour,
si as créé une Div menu par exemple, tu peux spécifier #menu a:hover , idem avec #sousmenu a:hover
Cela te permet de personnaliser la balise a au sein d'une div particulière.
--
Tøƒ
2
killermano66 Messages postés 233 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 25 novembre 2010 41
17 janv. 2008 à 17:57
Ben si tu veux plusieur rollover différent oui. Il te faut créer une classe pour chacuns.
2
Excusez-moi mais je n'ai pas tout compris si je vous envoie mon code ce sera eut-être plus simple. En fait j'ai fait mon menu et c'est "enjeux" et "notre process" à qui je voudrais mettre un autre css de survol. Quand je passe dessus le texte devient bleu, par exemple. Mais comment faire?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
@import url("corp.css");
@import url("titre page.css");




.tdover{
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #00863E;

}

.tdout {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #0188FF;
}

.tdover a, .tdout a {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

body {
background-color: #0188FF;
}
.Style1 {font-size: 9px}
.Style3 {
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0188FF;
font-weight: bold;
}
.Style4 {color: #00863e}
.Style5 {color: #00863E}
.Style14 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; font-size: 12px;}
.Style25 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; }
</style>
</head>

<body>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

<tr>
<td colspan="6"><div align="center"></div></td>
</tr>

<tr>
<td colspan="6"><table width="760" cellspacing="0" height="4" border="0">

<tr>

<td width="168" class="tdout" onmouseover="this.className='tdover'" onmouseout="this.className='tdout'"><a href="qui sommes-nous.html">Qui sommes-nous </a></td>
<td width="138" class="tdout" onmouseover="this.className='tdover'" onmouseout="this.className='tdout'"><a href="null">Notre activité </a></td>
<td width="137" class="tdout" onmouseover="this.className='tdover'" onmouseout="this.className='tdout'"><a href="null">La qualité </a></td>
<td width="157" class="tdout" onmouseover="this.className='tdover'" onmouseout="this.className='tdout'"><a href="null">Notre démarche </a></td>
<td width="138" class="tdout" onmouseover="this.className='tdover'" onmouseout="this.className='tdout'"><a href="null">Nous contacter </a></td>
</tr></table></td>
</tr>

<tr>
<td width="201" bgcolor="#00863e"><p class="Style14"> </p></td>
<td width="136" bgcolor="#00863e" class="Style25">~ nos enjeux </td>
<td width="106" bgcolor="#00863e"><span class="Style25">~ notre process </span></td>
<td width="108" bgcolor="#00863e"> </td>
<td width="103" bgcolor="#00863e"> </td>
<td width="106" bgcolor="#00863e"> </td>
</tr>
</table>
</body>
</html>
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
je n'y arrive toujours pas mais je vais persévérer. Je dois tout de même faire une classe même si c'est pour un rollover ?
1
a:hover.couleur1 {
color:#9999ff;
}

et pour le déclarer dans ton lien tu met :
<a href="url_de_ta_page" style="couleur1">Lien 1</a>

C'est class ="couleur1" qu'il fallait mettre évidement
1
killermano66 Messages postés 233 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 25 novembre 2010 41
17 janv. 2008 à 15:09
Ben comme on te l'a expliqué, tu définis une autre classe CSS avec la couleur désirée pour les liens que tu veux.
Puis tu déclare la classe dans le lien.

<a href="null" class="le_nom_de_ta_classe">Notre démarche</a>

class="le_nom_de_ta_classe" => C'est cette portion de code qui te permet de déclarer la classe que tu as préalablement créer dans ton css ( entre les balises <style></style> )
0