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

A voir également:

Liens css de couleurs différentes
Retour à la ligne css - Forum CSS
Enlever le soulignement d'un lien css - Astuces et Solutions
Enlever couleur lien css ✓ - Forum CSS
Ce fichier contient l'historique des livres empruntés à la bibliothèque. combien de titres différents contient-il ? ✓ - Forum Excel
Trait css ✓ - Forum CSS

7 réponses

Réponse 1 / 7

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é.

Réponse 2 / 7

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øƒ

Réponse 3 / 7

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.

Réponse 4 / 7

ducky
17 janv. 2008 à 15:03

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>

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

Posez votre question

Réponse 5 / 7

ducky
17 janv. 2008 à 16:31

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 ?

Réponse 6 / 7

Joe
31 oct. 2008 à 12:32

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

Réponse 7 / 7

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> )

Newsletters