[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à

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

heu wyniwyg en fait j'ai testé et mes lien reste en vert et c'est pas ce que veux.
voici le code :

Code :

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

1
2
3
4
ul#menu li a:link { color:#0060ff; text-decoration:none; }
ul#menu li a:visited { color:green; }
ul#menu li a:hover { color:#0060ff; text-decoration:none; }
ul#menu li a:active {color:#0000a0; text-decoration:none; }

je sais pas si j'arrive à me faire comprendre je reformule :

je souhaite avoir des liens par défaut en blanc, survole du curseur en bleu, une fois l'utilisateur clique sur acceuil par exemple que la couleur du texte de "acceuil" reste bleu tant qu'il n'a pas quitter la page. ça lui rappelle dans quelle rubrique du menu il se situe. une fois qu'il quitte acceuil et clique sur catalogue que texte de "acceuil" en blanc et c'est "catalogue" qui se met en bleu et le garde tant que l'uilisateur n'a pas quitter la page et ainsi de suite pour les autres. j'espere avoir mieux expliqué mon problème. merci

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

Envoyé par Petogaz

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

ben dans ton css tu mets

Code :

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

a:link {color:#0060ff;}

donc ce n'est pas en blanc qu'ils doivent apparaitre...? ou alors je me trompe et a:link veux dire autre chose...

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

en fait tu ouvres tes pages dans une iframe ou un truc comme ça?
et donc le lien sur lequel tu cliques est toujours présent à l'écran quand la nouvelle page s'affiche, c'est ça? mais imagine que dans accueil.html tu as d'autres liens : en cliquant dessus, tu perds le "active" de ton lien vers ton accueil... donc en css/html je ne vois pas comment faire...

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

ça ne marche toutjours pas !!!

voici le code comme tu m'a recommendé :

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
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 ;
}
 
 
ul#menu li a:link { color:##0060ff; text-decoration:none; }
ul#menu li a:hover { color:#0060ff; text-decoration:none; }

le a:hover marche bien (les liens passent en bleu) mais une fois que je cliques sur un lien le bleu ne reste pas !!!

**Linaa** · 20/04/2006, 15h06

Si tu veux que ça reste en bleu, à ce moment il faut spécifier du bleu pour a:visited (lien dejà visité!)

**Petogaz** · 20/04/2006, 15h38

je pense que ce n'est pas faisable en CSS.

Si tu veux que ça reste en bleu, à ce moment il faut spécifier du bleu pour a:visited (lien dejà visité!)

les liens qui ont déjà été visités c'est pas ce que je recherche. tous les liens sont en blanc au départ je clique sur un lien qqconque il passe au bleu seulement celui là pas les autres ! même si ils étaient visités (les autres restent en blancs) quand je vais cliquer sur un autre lien, le précédent revient en blanc et les autres restent en blanc. en quelques sortes c'est celui qui a la page active qui doit garder le bleu. mais en jouant avec a:active ça ne marche pas non plus.

**marsupix** · 21/04/2006, 10h38

a:active c'est qu'on on clique sur le lien - et tant qu'on reste appuyé sur la souris je crois - et l'état entre le moment où on a cliqué et le chargement de la page suivante est a:focus

**Petogaz** · 21/04/2006, 18h14

merci marsupix, mais ni le a:focus ne marche chez moi.

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

Discussions similaires

Partager

Partager