Liens css de couleurs différentes
ducky
-
Joe -
Joe -
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
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
A voir également:
- Liens css de couleurs différentes
- Vérificateur de liens - Guide
- La boite à couleurs - Télécharger - Divers Photo & Graphisme
- Remettre les couleurs d'origine android ✓ - Forum Samsung
- Remettre les couleurs d'origine de l'écran ✓ - Forum Windows 10
- Telecharger liens direct - Accueil - Outils
7 réponses
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é.
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é.
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øƒ
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øƒ
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>
<!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>
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 ?
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
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
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> )
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> )
