page 'active' non prise en compte ds le menu

Bonjour,

Petit souci concernant la gestion de la page active. Dans mon code CSS, celle-ci est bien gérée mais elle n'est pas prise en compte lors de tests.
Voici mon code dans le fichier CSS:

Citation:

---

/*=== MENU GAUCHE ====*/
#menu {height: 250px; float: left; padding-top:50px; padding-left: 15px;}

a.menu {font-family:Verdana,lucida,sans-serif; font-size:12px; text-decoration: none; padding-left: 25px;}
a.menu:link { color:#666;}
a.menu:visited { color:#666;}
a.menu:hover { color:#4169E1;}
a.menu:active { color:#4169E1; font-weight: bold;}

---

et l'utilisation dans le fichier html

Code:

---

1 2 3 4 5 6 7 8

<div id="menu" > <a class="menu" href="page1.htm">Menu1</a> <p></p> <a class="menu" href="page2.htm">Menu2</a> <p></p> <a class="menu" href="page3.htm">Menu3</a> </div>

---

Ca marche très bien pour la partie 'survol' du lien, mais lorsque je clic dessus, la gestion de la partie 'active' se fait rapidement mais ne reste pas !? Ici je devrais par exemple avoir mon lien en gras pour signaler la page sur laquelle je suis.

Merci de vos remarques ;)

a:active correspondant au clic de la souris.
Pour que le lien reste en couleur (pour signifier la page en cours), il faut voir du côté du JavaScript ou PHP.

Merci desert pour cette info, cela explique tout. Mais il doit bien y avoir une facon purement CSS de gérer cette 'signalisation'.

il suffit d'ajouter une class ".active" dans ton élément de menu genre

Code:

---

<a class="menu active" href="page1.htm">Menu1</a>

---

si tu es sur cette page.
après c'est à voir avec ta façon de procéder (menu à faire pour chaque fichier html, en php ...)

Oui, j'ai bien essayé cette syntaxe mais ça ne marche pas.
Ayant peu de pages (6), je fais la gestion du menu manuellement et donc idéalement renseignerais sur chaque page le fait qu'elle soit active mais . . .

J'ai tester plusieurs syntaxe sans résultat probant :?

Tu n'as probablement pas distingué la différence entre class="active" et le pseudo-element :active. Il n'y a pas de lien entre les deux, donc tu dois ajouter une règle css :

Code:

---

1 2 3

.active{ tes règles css }

---

Mais le :active correspond toujours et UNIQUEMENT à la gestion d'un lien activé (donc au moment où on clique dessus).
Pour éviter toute confusion, tu peux remplacer la classe "active" par un autre nom...
Autre chose, dans l'exemple :

Code:

---

<a class="menu active">

---

Ton lien possède 2 classes différentes "menu" et "active", pas une seule classe "menu active"

Merci Bovino pour l'info.
Voici donc ce que j'ai fait mais ca ne marche tj pas :(

Code:

---

1 2 3 4 5 6 7 8

a.menu { font-family:Verdana,lucida,sans-serif; font-size:12px; text-decoration: none; padding-left: 25px;} a.menu:link { color:#666; background: url(../images/PucebleuC.gif) left no-repeat;} a.menu:visited { color:#666; background: url(../images/PucebleuC.gif) left no-repeat;} a.menu:hover { color:#4169E1; background: url(../images/PucebleuF.gif) left no-repeat;} a.menu:active { color:#4169E1; background: url(../images/PucebleuF.gif) left no-repeat; font-weight: bold;}   .pageactive {color:#4169E1; background: url(../images/PucebleuF.gif) left no-repeat; font-weight: bold;}

---

et dans ma page html

Code:

---

1 2 3 4 5 6

<div id="menu" > <a class="menu pageactive" href="page1.htm" >page1</a> <p></p> <a class="menu" href="page2.htm" >page2</a> </div>

---

Le menu est ici bien mis en gras (font = bold) pour la page active et donc les deux class sont bien prises en compte mais
1) la couleur définie dans .pageactive n'est pas appliquée
2) l'image définie ds .pageactive n'est pas prise en compte non plus

En fait, seule la partie font-weight: bold; de .pageactive est prise en compte Why !? que me manque t-il ?

Oui, c'est la complexité des feuilles de style : l'héritage et les conflits...

Code:

---

1 2	a.menu:link { color:#666; background: url(../images/PucebleuC.gif) left no-repeat;} .pageactive {color:#4169E1; background: url(../images/PucebleuF.gif) left no-repeat; font-weight: bold;}

---

Tu demandes 2 choses différentes pour un même élément... qui gagne ?

Si je me souviens bien (et il est possible que je me souvienne mal :aie:) le "poids" d'une déclaration en conflit dépend du nombre d'éléments pour le définir.
Euh pas très clair, exemple concret :
a.menu : deux selecteurs -> poids = 2
.pageactive : un selecteur -> poids = 1
attention, je simplifie car il y a plusieurs niveaux de hiérarchie dans le calcul du poids 4 je crois), mais là on se situe au même niveau de hiérarchie...
Pour vérifier ma théorie, il faudrait essayer

Code:

---

div#menu a.pageactive {color:#4169E1; background: url(../images/PucebleuF.gif) left no-repeat; font-weight: bold;}

---

Mais bon, ça sert en fait à rien grâce à l'élément !important qui simplifie tout ça !!!:aie:

Code:

---

.pageactive {color:#4169E1 !important; background: url(../images/PucebleuF.gif) left no-repeat !important; font-weight: bold;}

---

Ouf ! merci pour ces infos car seul j'aurai galerer longtemps avant de comprendre. :roll:
Ok, tes explications sont bien clair, je vais les mettre en applications.
Mille merci :lol: