[CSS] Problème coloration liens déjà visités

  • Créateur du sujet Créateur du sujet Vince71
  • Date de début Date de début
A

Anonyme

Invité
Voilà, je refais un site en utilisant une feuilles de style comme d'hab. et mon probléme est dans les liens. voir =>http://vincentlenoir.d.free.fr/macge/index.html

}
a:link {
color: #999999;
text-decoration: none;
}
a:hover {
color: #0000ff;
text-decoration: underline;
}
a:visited {
color: #999999;
text-decoration: none;
}

Le liens normal est gris, quand je passe dessus il est bleu et souligné et quand il a était visité il est gris . MAIS POURQUOI QUAND LE LIENS EST DÉJÀ VISITÉ QUAND JE PASSE DESSUS IL NE CHANGE PAS DE COULEURS ?????? !!! :mad: :mad: :hein: :affraid: svp une réponse avant que je devienne chauve !!!! ;)
 
Je crois que c'est tout simplement car tes liens sont vide. J'ai essayé en ajouter n'importe quoi à la place de l'url de Photos et le comportement est correct.

Un petit truc à ce propos: je pense que lorsqu'on a aucun lien à mettre, le mieux est de mettre "#" (sans les guillemets) pour pouvoir tester comme il faut.

Sinon, j'ai vu également qu'il y a une légère faute dans ta CSS. La classe .texte ne se referme pas (le crochet de fin est ouvrant à la place d'être fermant).


J'ai changé le titre de ton message, il n'était pas très explicite. :zen:
 
molgow a dit:
Je crois que c'est tout simplement car tes liens sont vide. J'ai essayé en ajouter n'importe quoi à la place de l'url de Photos et le comportement est correct.
Cliquez pour agrandir...

Oopss.. j'aurais mieux fait de me taire. Ca ne fonctionne toujours pas. :heu: :rose:
 
Ahhhh.. cette fois je crois que j'ai trouvé!! :king:

En fait, il faut inverser l'ordre de visited et hover. Ne me demande pas pourquoi, j'en ai aucune idée. Je me souviens avoir lu il y a très longtemps quelque chose à ce sujet, mais j'avais oublié.

Bloc de code: 
a:link {
    color: #999999;
    text-decoration: none;
}
a:visited {
    color: #999999;
    text-decoration: none;
}
a:hover {
    color: #0000ff;
    text-decoration: underline;
}
 
  • J’aime
Réactions: Balooners
Dans le même style :
Bloc de code: 
a:link
{
	text-decoration: none;
	color: navy;
}

a:visited
{
	text-decoration: none;
	color: #03C;
}

a:hover, a:active { text-decoration: underline; }
a:active { color: red; }
Un lien normal est bleu foncé, s'il est visité il est un peu plus clair et si on passe dessus il ne change pas de couleur. Mon problème c'est que le soulignement d'un lien visité (quand on passe la souris dessus) est bleu foncé (de la même couleur qu'un lien non visité). Ca ne me gêne pas mais j'aimerais juste comprendre pourquoi.
 
:heu: ouais comme le probléme que j'avais mais moi en écrivant le visited puis le hover c'était ok mais là c'est pas ça ;... :hein: j'ais essayer un truc mais ça marche pas :( mmm
 
oui effectivement ca déconne grave :D

je vais te regarder ca :cool:

ok y'a des erreurs dans ton html

error
#############################
.texte {
font-size: 12px;
text-align: justify;
{
################################

font-family: "arial";
#######################################

tu trouveras les éléments css et html corrigés ici :

Bloc de code: 
############################################css corrigée

body {
	background-color: #cccccc;
	font-family: arial;
	font-size: 12px;
}

a:link {
	font-size: 12px;
    color: #999999;
    text-decoration: none;
}

a:hover {
    color: #0000ff;
    text-decoration: underline;
}

//visited active ............. 

.titre{
    background-color: #ffffff;
    border-color: #999999;
    border-style: solid;
    border-width: 1px; 
}

.corp{
    background-color: #ffffff;
    border-color: #999999;
    border-style: solid;
    border-width: 1px; 
    font-size: 12px;
    text-align: justify;
}

.texte {  
   font-size: 12px;
   text-align: justify;
}

.signa{
    text-aign: center;
}

.qp{
    font-size: 12px;
    color: #000000;
}
############################################html corrigé w3c compliant

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
		<link rel="stylesheet" href="style.css" type="text/css">
		<title>doc</title>
	</head>

	<body>
		<div align="center">
		<br>
		<br>
		<br>
		<br>
		<br>
		<table cellpadding="5" cellspacing="0" width="70%">
			<tr>
				<td class="titre" width="70%">
					{image}
				</td>
			</tr>
		</table>
		<br>
		<br>
		<table cellpadding="6" cellspacing="0" width="70%">
			<tr>
				<td class="corp" width="70%">
							<table width="316" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td><a href="index.html">Accueil</a></td>
									<td><span class="qp">Documentations</span></td>
									<td><a href="doc.html">Photos</a></td>
									<td><a href="doc.html">Liens</a></td>
									<td><a href="doc.html">Contact</a></td>
								</tr>
							</table>
				</td>
			</tr>
		</table>
		<br>
		<br>
		<table cellpadding="6" cellspacing="0" width="70%">
			<tr>
				<td class="corp" width="70%"><br>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;Bienvenue sur &quot;Astronomie, le site pour comprendre&quot;. Ce site vous permettra de d&eacute;couvrir l'Univers, simplement et ais&eacute;ment. Dans la partie &quot;Documentations&quot;, vous trouverrez diff&eacute;rentes explications sur le Syst&eacute;me Solaire, l'Univers en g&eacute;n&eacute;ral, etc... Pour la partie &quot;Photos&quot;, comme son nom l'indique vous pourrez regarder quelques images de l'Univers. Si vous voulez d&eacute;couvrir d'autres site sur le m&ecirc;me th&eacute;me que celui-ci, allez dans &quot;Liens&quot; et pour toutes r&eacute;clamation, demande, explications mal comprises merci de me contacter. En &eacute;sperant vous revoir prochainement, je vous souhaite une agr&eacute;able visite.<br>
					<br>
				</td>
			</tr>
		</table>
		</div>
	</body>

</html>

##############################################################

:zen: :zen:
 
molgow a dit:
En fait, il faut inverser l'ordre de visited et hover. Ne me demande pas pourquoi, j'en ai aucune idée. Je me souviens avoir lu il y a très longtemps quelque chose à ce sujet, mais j'avais oublié.
Cliquez pour agrandir...

Oui c'est ça, l'ordre doit toujours être : link - visited - hover - active (enfin les deux premiers peuvent être inversés)

Pourquoi ?

C'est en fait du à une caractéristique fondamentale des CSS : la cascade !
=> Le dernier style traité (celui qui est le plus bas dans la page) est toujours prioritaire

Donc dans le cas qui nous occupe si on définit hover avant visited tous les liens visités vont prendre le style "visited" qui sera prioritaire (le style "hover" est annulé)
Alors que si on met hover après visited tous les liens, qu'ils aient été visités ou pas, prendront le style "hover" lorsqu'ils seront survolés par un curseur

Hum j'espère que je me suis bien fait comprendre, mais c'est pas évident !

:D
 
  • J’aime
Réactions: molgow
L33T a dit:
Oui c'est ça, l'ordre doit toujours être : link - visited - hover - active (enfin les deux premiers peuvent être inversés)
Cliquez pour agrandir...

D'où le fameux moyen mnémotechnique pour retenir cet ordre : LoVe / HAte :p

Tant que j'y suis, pour retenir l'ordre des côtés dans l'attribution des margin et padding (top, right, bottom, left) : TRouBLe !!! :rateau:
 
L33T a dit:
Hum j'espère que je me suis bien fait comprendre, mais c'est pas évident !
Cliquez pour agrandir...

Super! Merci beaucoup pour l'explication! :up:
 

Sujets similaires

N
DWCS4 Problème d'affichage dans plusieurs navigateurs
Réponses
1
Affichages
2K
Développement web
momo-fr
momo-fr
pomme man
Random Grid sur Home page ! (Wordpress)
Réponses
2
Affichages
3K
Développement web
Niconemo
Niconemo
D
Problème CSS apparence graphique
Réponses
9
Affichages
2K
Développement web
Disia
D
X
CSS et IE 5.2 sous mac
Réponses
3
Affichages
991
Développement web
Yoop
Yoop
V
width dans un liens CSS ???
Réponses
1
Affichages
938
Développement web
bugman
bugman
Haut Bas