Discussion :

[Teddy7]

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:

/*=== 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 :

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

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

[desert]

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.

[Teddy7]

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

[htr999]

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

Code :

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

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

[Teddy7]

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

[Bovino]

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 :

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

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 :

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

<a class="menu active">

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