18073 sujets

Questions générales et questions de débutants

Conflit entre link et hover

Bonchour Smiley smile

Je vient de me mettre à la mise en page avec les blocs et tout le tutim donc j'en profite pour refaire mes feuilles de styles diverses et je suis confronté à un probleme que je n'avais jamais rencontré avant, mes liens ne réagissent pas :S
Voici les liens :

<ul class="liste_menu">
			<li><a href="#" class="menu">Accueil</a></li>
			<li><a href="#" class="menu">Dictionnaire</a></li>
			<li><a href="#" class="menu">Les personnages</a></li>
			<li><a href="#" class="menu">Les lieux</a></li>
			<li><a href="#" class="menu">Les organisations</a></li>
			<li><a href="#" class="menu">Les dossiers</a></li>
			<li><a href="#" class="menu">Forum</a></li>
			<li><a href="#" class="menu">Liens</a></li>
			<li><a href="#" class="menu">Contact</a></li>
			</ul>


Et voila ma feuille de style CSS :
a.menu:link{
color:#FFFFFF;
text-decoration:none;
}
a.menu:hover {
color:#FF0000;
text-decoration:underline;
}
a.menu:visited {
color:#FFFFFF;
text-decoration:none;
}


Sauf que les liens du menu ne se surlignent pas et ne deviennent pas rouges (je veux qu'ils deviennent blanc mais j'ai mis rouge pour tester et ca ne change pas) :S
La feuille de style s'appele liens.css et est appelée de la facon suivante :
<link rel="stylesheet" media="screen" href="styles/liens.css" />


mais je comprend pas pourquoi ca fait ca :S
je travaille en local, mon dossier est sur le bureau avec ma page (index.html) et les dossiers (styles et images)

Si j'enleve le a.menu:visited, la tout marche mais les liens sur lesquels j'ai deja cliqué sont bleu foncé comme par defaut...
Quelqu'un saurait m'aider ? Smiley confused
Bonsoir,
C'est le piège classique. En fait l'odre devrait toujours être le suivant:
link,visited,hover,active (LVHA) pour des question d'héritage.
Comme ton dernier lien (visited) se trouvais en dernier, alors il ecrasait le hover.


Tu devrais donc écrire


a.menu{    /*le link n'est pas necessaire, de cette façon ses styles s'appliqueront aussi aux lien visités qui ne sont donc plus necessaires*/
color:#FFF; /*code hexadécimal raccourci*/
text-decoration:none;
}
a.menu:hover {
text-decoration:underline;
}

Modifié par Hermann (24 Feb 2006 - 18:51)
Si je puis me permettre,
je ne suis pas un expert du tout en css, je commence à vrai dire.
Pour chaque lien tu spécifies une class, alors que tu pourrais juste déclarer la fonction via le parent.
pourquoi ne pas créer la feuille de style suivante:

html :

ul id="liste_menu">
<li><a href="#" >Accueil</a></li>
<li><a href="#" >Dictionnaire</a></li>
<li><a href="#" >Les personnages</a></li>
<li><a href="#" >Les lieux</a></li>
<li><a href="#" >Les organisations</a></li>
<li><a href="#" >Les dossiers</a></li>
<li><a href="#" >Forum</a></li>
<li><a href="#" >Liens</a></li>
<li><a href="#" >Contact</a></li>
</ul>

css :

#ul a:link{

Et eventuellement spécifier une class pour un lien différent des autres.

Merci de m'eclairer sur cette observation si besoin est.
Smiley sweatdrop
Sujet clos
Aller à