Discussion :

[korygans]

Bonjour a tous.

Voila je viens de télécharger un kit graphique gratuit celui ci.
Il y a un effet que j'aime bien en haut à droite, mais que je n'arrive pas à reproduire.
En effet, "about application" est souligné en rouge
et reste actif (puisque nous sommes sur la page qui lui est consacré).
Et les autres textes "register" "demo" "help" "contact" sont soulignés en gris quand on déplace la souris vers ces liens.

Bon là je ne vous apprend rien.
Ce que j'aimerai, c'est que sur ma deuxième page (par exemple: "register"), ce soit lui qui soit souligné en rouge et qu'il reste actif
et que "about application" suive la logique des autres c'est-à-dire souligné en gris quand on déplace la souris vers ce lien.
Ainsi nous verrions que nous avons changé de page.

Pourriez-vous me dire ce que je dois modifier dans le style de calque CSS?
Merci.

[numew]

Voici le code source de ta page :

Code :

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

1
2
3
4
5
6
7
 
<li class="active"><a href="#">about application</a></li>
			<li><a href="#">register</a></li>
			<li><a href="#">demo</a></li>
			<li><a href="#">help</a></li>
 
			<li><a href="#">contact</a></li>

Il te faut donc placer la class "active" dans le li du lien concerné.

[FraK]

Rien dans le css à proprement parlé en fait, mais plutôt dans la page concernée directement.

Ceci est le code actuel quand tu te trouves sur "about application"

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="header">
 
		<h1><a href="#">Web Application</a></h1>
		<ul id="menu">
			<li class="active"><a href="#">about application</a></li>
			<li><a href="#">register</a></li>
			<li><a href="#">demo</a></li>
			<li><a href="#">help</a></li>
 
			<li><a href="#">contact</a></li>
		</ul>
	</div>

Si tu veux que sur "register" il y est la barre de soulignement en rouge, il faut que dans le code de la page register tu mettes

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="header">
 
		<h1><a href="#">Web Application</a></h1>
		<ul id="menu">
			<li><a href="#">about application</a></li>
			<li class="active"><a href="#">register</a></li>
			<li><a href="#">demo</a></li>
			<li><a href="#">help</a></li>
 
			<li><a href="#">contact</a></li>
		</ul>
	</div>

[romain_ci]

Mouai ! pas tres dinamyque tout ca !
il vaudrai mieu utiliser le css a fond

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="header">
 
		<h1><a href="#">Web Application</a></h1>
		<ul id="menu">
			<li><a href="#">about application</a></li>
			<li><a href="#">register</a></li>
			<li><a href="#">demo</a></li>
			<li><a href="#">help</a></li>
 
			<li><a href="#">contact</a></li>
		</ul>
	</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#menu a {
   css quand ton lien est inactif !
}
 
#menu a:hover {
   css quand ton lien est au survol de la souris.
}
 
#menu a:active {
   css quand ton lien est actif.
}

voila voila. je pence que cela cerai mieu de faire comme ceci

[c_s_s]

romain_ci, tu confonds deux choses :

a:active correspond à l'état actif d'un lien, c'est à dire ce que l'on voit à l'instant où on clique sur un lien.

Or dans l'exemple donné plus haut, le class .active sert simplement à signaler à l'utilsateur dans quelle rubrique se trouve l'utilisateur (sans action sur le lien). C'est d'ailleurs pour ça que le class se trouve sur la liste (li) et pas sur le lien.

[romain_ci]

Heu non je confond pas :p
j'ai bien vu que plus haut c'été une classe.

Mais autant faire les choses dynamiquement quand on peut les faires.

[c_s_s]

Et comment tu fais pour que la bonne rubrique soit sélectionnée, si tu enlèves le class ".active" ?

Au passage, je ne vois toujous pas le rapport entre le a:active et le côté "dynamique" ?!

T'es sûr de ne pas confondre .active (point) et :active (deux points) ?