Problème d'apparence des liens sur css [Résolu]

Question

pccc

28 Sep 2008 à 16:44

Bonjour à tous,

Je me suis attaqué à la conception d'un petit site informatif tres basique en css en suivant scrupuleusement une procédure décrite sur un bouquin (procédure confortée par diverses sources sur le net).

Vous vous en doutez, étant novice en la matière, je rencontre un problème lorsque je test mes pages sur IE, firefox et safari.

En effet, l'apparence de mes liens lors de leur survol et lorsqu'ils ont été visité n'est pas prise en compte et pourtant les balises a:hover et a:visited sont je pense correctes...

Je me casse la tete à essayer que comprendre le pourquoi du comment mais sans résultats...

Merci d'avance pour votre aide!
Modifié par pccc (30 Sep 2008 - 10:08)

FunK

28 Sep 2008 à 17:19

Salut,

C'est dur de pouvoir t'aider et de repérer tes erreurs si tu nous fournis aucune page en ligne, aucun code.

6l20

28 Sep 2008 à 17:35

Bonjour pccc,

Peut-être un soucis d'ordre de déclaration de ces liens dans ta feuille de styles ?

Toutefois, comme le précise fort justement FunK, il va nous être difficile de te venir davantage en aide sans un minimum d'information (le code css et/ou html par exemple) Smiley sweatdrop

A te lire donc Smiley cligne

pccc

28 Sep 2008 à 17:50

Effectivement novice jusqu'au bout...

voici le code 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=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Document sans nom</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
	background-color: #00FFFF;
	margin: 0px;
}
-->
</style>
<link href="../style css/azimutlp.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:583px;
	top:32px;
	width:396px;
	height:82px;
	z-index:1;
}
#apDiv2 {
	position:absolute;
	left:425px;
	top:10px;
	width:540px;
	height:121px;
	z-index:1;
}
#apDiv3 {
	position:absolute;
	left:500px;
	top:41px;
	width:400px;
	height:75px;
	z-index:1;
}
.Style1 {font-weight: bold}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<body>
<div id="conténaire">
  <div id="haut"><img src="../images/photopalmier.jpg" width="382" height="127" />AZIMUTLPJ<img src="../images/logo.png" width="410" height="87" /></div>
  <div id="barredenavigation"><!-- TemplateBeginEditable name="EditRegion1" -->
  <ul>
    <li><span class="Style1"><a href="#">Acceuil</a></span></li>
    <li><a href="#"><strong>Qui sommes nous?</strong></a></li>
    <li><a href="#"><strong>Planning 2008/2009</strong></a></li>
    <li><a href="#"><strong>Contact</strong></a></li>
  </ul>
  <!-- TemplateEndEditable --></div>
  <div id="histoire"><!-- TemplateBeginEditable name="EditRegion3" -->EditRegion3<!-- TemplateEndEditable --></div>
  <div id="barredecoté"><!-- TemplateBeginEditable name="EditRegion2" -->
  <p><strong><a href="#">Archives</a></strong></p>
  <p><a href="#">Forêt du Maido 24/08/08</a></p>
  <p><a href="#">Parc du colosse 21/09/08</a></p>
  <!-- TemplateEndEditable --></div>
  <div id="pieddepage"><!-- TemplateBeginEditable name="EditRegion4" -->
  <ul>
    <li class="Style1"><a href="#"><strong>Acceuil</strong></a></li>
    <li class="Style1"><a href="#"><strong>Mentions légales</strong></a></li>
    <li class="Style1"><a href="#"><strong>Contact</strong></a></li>
  </ul>
  <!-- TemplateEndEditable --></div>
</div>
</body>
</html>

Merci d'avance pour votre aide!
Modifié par pccc (29 Sep 2008 - 06:39)

pccc

28 Sep 2008 à 17:53

et le code css:

#conténaire {
	margin: auto;
	height: 1980px;
	width: 950px;
	background-color: #FFFFFF;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}
#haut {
	background-color: #3366CC;
	padding: 8px;
	height: 125px;
	width: 934px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #3366CC;
	background-position: center center;
	line-height: 0px;
}
#barredenavigation {
	background-color: #CCFF99;
	padding: 6px;
	height: 20px;
	width: 919px;
	margin-top: 10px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 8px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 11px;
	line-height: 16px;
	color: #000000;
	text-align: center;
	display: block;
}
ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
li {
	display: inline;
	list-style-type: none;
	margin-right: 53px;
	margin-left: 70px;
}
a:link {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: none;
	color: #0099FF;
}
a:visited {
	text-decoration: none;
	color: #000000;
}


#barredecoté {
	background-color: #00FF66;
	margin: 10px;
	padding: 8px;
	height: 400px;
	width: 107px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
}
#barredecoté ul {
	margin: 0px;
	padding: 0px;
}
#barredecoté li {
	display: block;
	list-style-type: none;
}
#barredecoté a:link {
	text-decoration: none;
	color: #000000;
}
#barredecoté a:hover {
	text-decoration: none;
	color: #FF0000;
}
#barredecoté a:visited {
	text-decoration: none;
	color: #000000;
}

#histoire {
	margin: 10px;
	padding: 8px;
	float: right;
	height: 1700px;
	width: 760px;
}
#pieddepage {
	background-color: #CCFF99;
	padding: 6px;
	height: 20px;
	width: 919px;
	margin-top: 10px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 8px;
	clear: both;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
	color: #000000;
	text-decoration: none;
}
#pieddepage ul {
	margin: 0px;
	padding: 0px;
}
#pieddepage li {
	display: inline;
	list-style-type: none;
	margin-right: 110px;
	margin-left: 110px;
	margin-top: 0px;
	margin-bottom: 0px;
	float: none;
	text-decoration: none;
}
#pieddepage a:link {
	text-decoration: none;
	color: #000000;
}
#pieddepage a:hover {
	text-decoration: none;
	color: #FF0000;
}
#pieddepage a:visited {
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
	color: #000000;
}

Modifié par pccc (29 Sep 2008 - 06:37)

pccc

28 Sep 2008 à 18:50

Merci 6120,

en effet mon bouquin doit etre "légé" car apres correction de l'ordre sa va mieux sauf que j'ai toujours un problème avec a:visited qui me pourrit tout mes liens si je lui attribut une couleur différente de a:link.

Est ce encore un problème d'ordre???

Merci mille fois déja pour sa!

6l20

28 Sep 2008 à 19:35

pccc,

Pourrais-tu éditer tes deux messages précédents afin de mettre en forme tes lignes de code à l'aide des balises prévues à cet effet :

[ code] Ton code html,css, autres...[ /code] [#blue]
Sans espace après chaque crochet ouvrant ou plus simplement 
en utilisant le bouton code prévu [/#]

Concernant ton problème, es-tu sûr d'avoir lu le lien que je t'ai fourni ?

a écrit :
Noter que la règle A:hover doit être placé après A:link et A:visited, autrement les règles de cascade feront que la propriété 'color' spécifiée par celle-ci sera cachée. De la même façon, comme la règle A:active est placée après A:hover, la couleur spécifiée par celle-ci (lime) sera appliquée quand l'utilisateur active et survole l'élément A."

Moyen mnémotechnique pour ne pas oublier :
LoVe HAte
(a:link a:visited a:hover a:active

Voili, voilou...
Accéssoirement : 6l20 avec un L comme dans Sylvain Smiley cligne

pccc

28 Sep 2008 à 20:57

6l20,

Merci pour ton aide et tes conseil, "j'apprend" grace à toi...
Je vais faire attention à éditer correctement mon code.

Apres lecture attentive de ton lien je crois comprendre que pour fonctionner correctement les régles doivent suivre un ordre précis (ce qui règle apres correction en partit mon problème) et si je comprend bien a:active est nescessaire au fonctionnement de a:visited.

Je rajoute donc pour essayer #barredecoté a:visited à mon code css mais sans succes, j'ai du louper un truc?

#conténaire {
	margin: auto;
	height: 1980px;
	width: 950px;
	background-color: #FFFFFF;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}
#haut {
	background-color: #3366CC;
	padding: 8px;
	height: 125px;
	width: 934px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #3366CC;
	background-position: center center;
	line-height: 0px;
}
#barredenavigation {
	background-color: #CCFF99;
	padding: 6px;
	height: 20px;
	width: 919px;
	margin-top: 10px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 8px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 11px;
	line-height: 16px;
	color: #000000;
	text-align: center;
	display: block;
}
ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
li {
	display: inline;
	list-style-type: none;
	margin-right: 53px;
	margin-left: 70px;
}
a:link {
	text-decoration: none;
	color: #000000;
	}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: none;
	color: #0099FF;
}



#barredecoté {
	background-color: #00FF66;
	margin: 10px;
	padding: 8px;
	height: 400px;
	width: 107px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
}
#barredecoté ul {
	margin: 0px;
	padding: 0px;
}
#barredecoté li {
	display: block;
	list-style-type: none;
}
#barredecoté a:link {
	text-decoration: none;
	color: #000000;
	}
#barredecoté a:visited {
	text-decoration: none;
}
#barredecoté a:hover {
	text-decoration: none;
	color: #FF0000;
}
#barredecoté a:active {
	color: #666666;

}


#histoire {
	margin: 10px;
	padding: 8px;
	float: right;
	height: 1700px;
	width: 760px;
}
#pieddepage {
	background-color: #CCFF99;
	padding: 6px;
	height: 20px;
	width: 919px;
	margin-top: 10px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 8px;
	clear: both;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
	color: #000000;
	text-decoration: none;
}
#pieddepage ul {
	margin: 0px;
	padding: 0px;
}
#pieddepage li {
	display: inline;
	list-style-type: none;
	margin-right: 110px;
	margin-left: 110px;
	margin-top: 0px;
	margin-bottom: 0px;
	float: none;
	text-decoration: none;
}
#pieddepage a:link {
	text-decoration: none;
	color: #000000;
	}
#pieddepage a:visited {
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
	color: #000000;
}
#pieddepage a:hover {
	text-decoration: none;
	color: #0099FF;
}

6l20

28 Sep 2008 à 22:35

pccc a écrit :

Je vais faire attention à éditer correctement mon code.

Parfait pour ce nouveau message, reste à modifier les précédents (bouton éditer en haut à droite de tes messages puis code...) Smiley cligne

pccc a écrit :

Apres lecture attentive de ton lien je crois comprendre que pour fonctionner correctement les régles doivent suivre un ordre précis (ce qui règle apres correction en partit mon problème) et si je comprend bien a:active est nescessaire au fonctionnement de a:visited.

Oui en ce qui concerne l'ordre précis, pas tout à fait en ce qui concerne la compréhension du mécanisme:
Tu peux parfaitement définir l'aspect de tes liens visités sans définir l'état actif, ne définir que l'état normal et le survol, mais lorsque tu définis l'état visité, il doit se trouver avant l'état survolé si celui-ci est défini...etc...

pccc a écrit :

Je rajoute donc pour essayer #barredecoté a:visited à mon code css mais sans succes, j'ai du louper un truc?

Cet article pourra peut-être t'éclairer davantage ?

Tu n'as pas défini de couleur (du lien ou du background ) pour l'état visité, c'est voulu ?
(tu peux également cibler ces liens de cette manière : #barredecoté li a:link, #barredecoté li a:visited, etc...)
Fais des tests, tu verras c'est amusant Smiley cligne

Après on rajoute la pseudo-classe dynamique focus Smiley lol

Cdt,
Sylvain
Modifié par 6l20 (29 Sep 2008 - 08:38)

pccc

29 Sep 2008 à 07:41

Excellent ce tutoriel css, mon bouquin est obselette...

Je commence à mieux cerner la logique des choses.
Reste un (petit) problème persistant, je définit ma couleur pour a:visited et o surprise lorsque je visualise ma page sur un navigateur l'état a:link (qui est définit noir) à pris la couleur de l'état a:visited (qui est gris), seul solution ne pas définir de couleur pour l'état a:visited (ce qui ne sert à rien au final...).

Mister, si tu y vois une solution je suis preneur, de toute façon cela n'est pas vraiment handicapant pour le rendu de mon site mais juste frustrant de ne pas trouver la solution. Smiley langue

Merci pour tout!

voici mon bout d'essai sur #barredecoté

#barredecoté {
	background-color: #00FF66;
	margin: 10px;
	padding: 8px;
	height: 400px;
	width: 107px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
}
#barredecoté ul {
	margin: 0px;
	padding: 0px;
}
#barredecoté li {
	display: block;
	list-style-type: none;
}
#barredecoté  a:link  {
	text-decoration: none;
	color: #000000;
	}
#barredecoté  a:visited  {
	text-decoration: none;
	color: #666666;
}
#barredecoté  a:hover  {
	text-decoration: none;
	color: #FF0000;
}

6l20

29 Sep 2008 à 08:38

Bonjur pccc,

Le tutoriel et le site dans sa globalité sont effectivement à mettre dans tes favoris et à consulter sans modération.
Prends le temps également de parcourir toutes les ressources disponibles sur le site d'Alsacreations (et les nombreux liens cités en référence)
Un petit tour sur cet article : Comment débuter et trouver l'information, ainsi que dans les Tutoriels et dans la FAQ devrait déjà bien t'informer sur les standards du web et la manière de faire un site conforme.
Je me suis également laissé dire que tu pouvais fort bien dépenser quelques euros pour l'achat d'un ouvrage de référence : http://www.alsacreations.com/livre/

Concernant ton problème :

1-Essaies en vidant le cache navigateur ? si tu as déjà cliqué sur ce lien auparavant, il se peut que ton navigateur ait gardé cette information en mémoire (ce qui peut être pratique lorsque l'on navigue, non ?) auquel cas rien d'étonnant au phénomène que tu décris.

2-Si tes liens (a) se trouvent dans des items de listes (li) contenus dans une liste non ordonnée (ul) elle même contenue dans un conteneur portant le doux nom de "barredecoté", autant écrire :

#barredecoté li a:link {
	text-decoration: none;
	color: #000000;
}
#barredecoté li a:visited {
	text-decoration: none;
	color: #666666;
}
#barredecoté  li a:hover  {
	text-decoration: none;
	color: #FF0000;
}

Comme signalé un peu plus tôt.

3- Il est sans doute moins "dangereux" de prendre l'habitude de ne pas mettre de ponctuation dans tes feuilles de styles (#barredecote (ou #siderbar) fonctionne très bien) cela évite les erreurs lors des appels des classes ou identifiants dans ta page html, éventuellement cela évite les problèmes d'encodage...

Cdt,
Sylvain
Modifié par 6l20 (30 Sep 2008 - 09:54)

pccc

30 Sep 2008 à 06:04

Merci pour tout tes conseils,

j'ai commandé le bouquin dans la foulée...
En tout cas ce site est une mine d'or pour celui qui débute!

Bonne continuation
Smiley biggrin

6l20

30 Sep 2008 à 09:59

pccc a écrit :

Merci pour tout tes conseils,
j'ai commandé le bouquin dans la foulée...
En tout cas ce site est une mine d'or pour celui qui débute!
Bonne continuation

De rien, tu considères ton sujet comme [résolu] ?

Bonne continuation itou Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

Problème d'apparence des liens sur css [Résolu]