[CSS]problème avec les liens

**Petogaz** · 20/04/2006, 13h26

salut,

j'essais de définir des couleurs selon que le lien est activé, survolé....ce que vous connaissez. le problème que je rencontre c'est une fois le lien activé il ne se passe rien !

. je vous assure que j'ai d'abord effectué des recherches mais aucune n'ont été fructueuses. j'ai suivi l'ordre etc...je précise que mes pages apparaissent en fonction d'une condition sur mon menu. en fait je fait des includes (avec php).
mon css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background : #000;


}

div#conteneur
{
	width: 990px ;
	margin: 0 auto ;
	text-align: left ;
	border-Right:2px solid #ab4 ;
	border-left: 2px solid #ab4 ;
	border-bottom: 2px solid #ab4 ;
	background-image : url(images/background.jpg) ;
	background-repeat : repeat;
	background-attachment : fixed; 
}

div#header{
 width: 990px ;
border: 2px solid #ab4 ;
background : rgb(153,204,255);
height : 80px;
}


ul#menu
{	
	height: 30px ;
	margin: 0 ;
	padding:0;
	background: url(images/entete_13.jpg) repeat-x 0 0px;
	list-style-type: none ;
}
ul#menu li
{
	float: left ;
	text-align: center ;
}

ul#menu li a
{	
	width: 190px ;
	line-height: 20px ;
	font-size: 1em ;
	font-weight: bold ;
	letter-spacing: 1px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	border-right: 2px solid #e0e0e0 ;
}

<--------------le problème se situe ici------------------------>
ul#menu li a:link { color:#0060ff; text-decoration:none; }
ul#menu li a:visited { color:#fff; text-decoration:none; }
ul#menu li a:hover { color:#0060ff; text-decoration:none; }
ul#menu li a:active {color:#0000a0; text-decoration:none; }

<---------------------------------------------------------->


div#contenu
{
margin-left : 80px;
margin-right : 100px;	
}
div#contenug
{
paddig-left : 0;

}
p#footer
{	font-size : 0.79em;
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: center ;
	color: #0000a0 ;
	
	
clear : both;
}

pre
{

	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}
* html pre
{
	width: 636px ;
}

pre span
{
	color: #560 ;
}
pre span.comment
{
	color: #b30000 ;
}

le corps est ici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

		<div id="header"><object 

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swfl

ash.cab#version=6,0,29,0"width="468" height="60" >
<param name="movie" value="images/myban.swf">
<param name="quality" value="high">
<embed class="margesfw" src="images/myban.swf" quality="high" 

pluginspage="http://www.macromedia.com/go/getflashplayer" 

type="application/x-shockwave-flash"width="468" height="60" ></embed>
</object> 
</div>
<div id="conteneur">
<----------------------les liens sont à ce niveau--------------------->	
		<ul id="menu">
			<li><a href="<? echo "$PHP_SELF?choix=1"; ?>" 

>Accueil - Pr&eacute;sentaion</a></li>
			<li><a href="<? echo "$PHP_SELF?choix=2"; 

?>">Catalogue - Calendrier</a></li>
			<li><a href="<? echo "$PHP_SELF?choix=3"; 

?>">Demande Sp&eacute;cifique</a></li>
			<li><a href="<? echo "$PHP_SELF?choix=4"; 

?>">R&eacute;f&eacute;rences - Partenaires</a></li>
			<li><a href="<? echo "$PHP_SELF?choix=5"; 

?>">Nous Contacter</a></li>
			
		</ul>
		
		<div id="contenu">
			<? 
			/* traitement du choix effectué dans le menu 

du haut */
<--------------------Mon fichier qui sert de condition et envoi la bonne page------------------------------------------------------------>
			include("menu.php"); 

			/* si le formulaire de personnalisation de 

stages est validé, traiter l'envoi */

			if ($envoi==1)
				{
			include("envoi.php");
				}

?>
		</div>
		
		<p id="footer">Formatique 2000 - Centre 

d'activit&eacute;s &eacute;conomiques - Z.I. de Franchepr&eacute; - 

54240 JOEUF<br/>T&eacute-Fax: 03.82.22.07.07 - Email : 

formatique2000@wanadoo.fr <br/>
<b>&copy; Formatique2000 </b>ann&eacute;e 2006</p></div>
	
</body>
</html>

**Linaa** · 20/04/2006, 13h49

Pour toi qu'est-ce qu'un lien "activé" ?

Le a:active se met en evidence que lorsque le "curseur" est sur le lien (fais donc un test avec la touche tabulation pour passer d'un lien à un autre).

De plus, ça ne fonctionne pas pour IE (à moins qu'il l'interprète autrement, comme d'hab...)

**Petogaz** · 20/04/2006, 13h54

en effet quand je fais des tab les liens changent de couleurs (bleu) sous IE. mais pas sous firefox ! en fait ce que je veux faire c'est qu'une fois cliqué le lien reste au bleu pour rappeller l'utilisateur où il se situe. peut-on le faire en CSS ou serais-je obligé de le faire avec des conditions en php ou javascript ?
merci de ta réponse.

**wyniwyg** · 20/04/2006, 14h03

il faut faire la différence entre a:active qui correspond à un lien qui vient d'être cliqué, par exemple pour ouvrir une pop-up ou une page dans une frame, et a:visited qui correspond à un lien déjà visité ultérieurement
quand au a:hover, c'est quand la souris passe sur le lien sans cliquer dessus

**wyniwyg** · 20/04/2006, 14h08

je viens de tester ton code sous IE, les liens apparaissent en blanc, alors que ce n'est pas la couleur par défaut que tu as établie (#0060ff)...

**Petogaz** · 20/04/2006, 14h11

]heu merci wyniwyg, j'ai maintenant compris mais cela ne répond pas à ma question à savoir :

en fait ce que je veux faire c'est qu'une fois cliqué le lien reste au bleu pour rappeller l'utilisateur où il se situe. peut-on le faire en CSS ou serais-je obligé de le faire avec des conditions en php ou javascript ?
merci de ta réponse.

**wyniwyg** · 20/04/2006, 14h17

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<style>
a.1:visited {color:green;}
</style>
</head>
<body>
<a href="a.html">lien 1</a>
<br><br>
<a href="b.html" class="1" target="bob">lien 2</a>
<br><br>
<iframe name="bob"></iframe>
</body>
</html>

en fait, ça marche sous IE si tu ne précises pas de couleur par défaut > pas de style spécifique pour a (ou a:link)
test ce bout de code, tu verras que le 2nd lien reste bien en vert, même en reloadant ta page

**Petogaz** · 20/04/2006, 14h17

je viens de tester ton code sous IE, les liens apparaissent en blanc, alors que ce n'est pas la couleur par défaut que tu as établie (#0060ff)...

j'avoue que je n'ai pas bien compris là

**ilood** · 21/04/2006, 19h46

Salut

Envoyé par Petogaz

en effet quand je fais des tab les liens changent de couleurs (bleu) sous IE. mais pas sous firefox ! en fait ce que je veux faire c'est qu'une fois cliqué le lien reste au bleu pour rappeller l'utilisateur où il se situe. peut-on le faire en CSS ou serais-je obligé de le faire avec des conditions en php ou javascript ?

Oui tu es obligé de "dynamiser" ta page. En php c'est faisable c'est sur, en javascript je ne sais pas.

En php quelque chose du genre : si choix=3 alors faire un echo d'un li avec un classe "actif"

Et dans ton css tu créés une classe "actif" avec une couleur de lien différente.

Les pseduo classes dynamiques css ne peuvent pas deviner si l'utilisateur se situe sur la page accueil, catalogue, demande, etc.

Ai-je bien compris l'origine du post ?

[CSS]problème avec les liens

CSS

Vue hybride

Discussions similaires

Partager

Partager