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) ?

[romain_ci]

non non tkt !

.active c'est une classe
:active c'est une pseudo-classe

Mais c'est que la avec la classe a deplacer a chaque fois pour montrer que c'est actif c'est pas trés propre car :

sur toute les pages il va avoir un menu avec la classe de placer seulement.
si ta une faute d'orthographe par exemple sur le menu. Obliger de reprendre toutes les pages pour changer ca .

Alors que si il fait tout en css il aura son menu en include. Et pour la faute il aura a changer que sur la page includer !

[c_s_s]

Je suis d'accord, mais tu ne réponds pas à ma question :

En quoi le a:active permet de mettre en valeur la rubrique sur laquelle on se trouve ? C'est ça que je ne comprends pas.

Le CSS met en valeur la rubrique sélectionnée, mais il faut bien qu'un élément indique quelle rubrique est sélectionnée.
Et je ne vois pas en quoi le a:active va permettre de positionner cet élément dynamiquement sur la bonne rubrique.

???

Dans ton exemple, je ne vois rien de dynamique. Je vois juste un effet sur le lien quand on clique dessus.

[pop_up]

http://www.w3.org/TR/1998/REC-CSS2-1...pseudo-classes

The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

Traduction
La pseudo-classe :active, qui est appliquée quand l'utilisateur active un élément. Par exemple, entre le moment où l'utilisateur presse le bouton de la souris et le relâche

Ceci montre bien que le selecteur :active ne correspond pas à ce que demande korygans il me semble puisque ce selecteur sera actif entre le moment où l'utilisateur presse le bouton de la souris et le relâche

ce que veut korygans c'est que en passant d'une rubrique A à une rubrique B, au rechargement de la page ce sera la rubrique B d'active car on y est dedans.

Pour moi Frak et c_s_s ont raison.

Si tu penses qu'on se trompe, montre nous un bout de code qui fasse ce que veut korygans.

[korygans]

Wahou je ne pensais pas que mon message susciterait au tant de débats.

En tous cas, merci à tous pour m'aider à comprendre le css et le html; je me débrouille plus sur Photoshop et AE.

Bref, pop_up a bien compris ce que je cherche à reproduire.

Je vais essayer toutes les solutions qui me sont proposées et je vous tiendrez au courant.
a+