Menu d'accès rapide et ancre

Salut à tous

J'ai crée un menu horizontal d''accès rapide avec 5 boutons.
J'ai deux menus qui pointent vers deux pages html de mon site et les trois autres menus qui pointent vers une autre page html mais vers des ancres.
Mes menus changent de couleurs pour la page en cours , je n'ai aucun problème pour les deux premiers menus, par contre pour les ancres la couleur changent en même temps ce qui fait que j'ai trois menus qui semblent actif en même temps;
Comment faire pour que la couleur s'applique que pour une ancre à la fois;
Voici mon code pour la page html de mes ancres.

Je sais bien que le problème viens des 3 id ="active"
Qui a une solution?

A+

<!-- Menu d'accès rapide--> 
		    <ul id="menuhorizontal">	  
<li><a href="contact.html">Contact</a></li>
<li id="active"><a href="#plan_d_acces">Plan d'accès</a></li>
<li id="active"><a href="#tarifs">Tarifs</a></li>
<li id="active"><a href="#cours">Cours</a></li>
<li><a href="index.html">Retour accueil</a></li>
           </ul>

/* ceci est mon menu horizontal */
#menuhorizontal {
    position: fixed;
	top: 0;
	width: 80%;
    margin-top: 187px;
	padding:0;
    height: 20px;
    list-style-type: none;
	text-align: center;
	background: white;
    } 
	
#menuhorizontal li { 
    display: block;
	float: right;
	padding: 0;
    margin: 0;
	text-align: center;
    }
#menuhorizontal  li a { 
   display: block;
   padding: 0;
   margin: 0 0 10px 0;
   text-decoration: none;
   width: 78px;
   height: 18px;
   border-top: 1px solid #f5d7b4;
   border-left: 1px solid #f5d7b4;
   border-bottom: 1px solid #f5d7b4;
   border-right: none;
   background: #fff;
   color: silver;
   text-align: center;
   font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
   }
#menuhorizontal  li a:hover { 
   background: #f5d7b4;
   color: #930;
   }
#menuhorizontal a:active { 
   background: #c60;
   color: #fff;
   }
#menuhorizontal #active a { 
   background: #c60;
   color: #fff;
   border: 1px solid #c60;
    }

Modifié par kercroam (14 Apr 2010 - 12:40)

Salut et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Bonne continuation

Hello,

Le souci provient effectivement de tes 3 <li> l'id "active". Un id DOIT être unique au sein de la page en cours. Un même id référencé plus d'une fois dans une page, c'est incorrect et illogique

Essaie de modifier ton html de la sorte (ici, j'ai supposé qu'on était sur la page de plan d'accès) :

<!-- Menu d'accès rapide-->
<ul id="menuhorizontal">
<li><a href="contact.html">Contact</a></li>
<li class="active"><a href="#plan_d_acces">Plan d'accès</a></li>
<li><a href="#tarifs">Tarifs</a></li>
<li><a href="#cours">Cours</a></li>
<li><a href="index.html">Retour accueil</a></li>
</ul>

Et ta CSS comme ceci, en remplaçant #menuhorizontal #active a par :

#menuhorizontal li.active a {
background: #c60;
color: #fff;
border: 1px solid #c60;
}

Bonjour

Merci pour ta réponse Ladytron.

En fait mes 3 ancres se trouvent sur la page infos_pratiques.html, apparemment il n'y a que le menu plan d'accès qui devient actif

Pour Mikachu, j'ai bien appuyer sur les boutons codes mais je crois que j'ai fais l'erreur de sélectionner mon code html et ensuite css et d'appuyer sur le bouton code au lieu d'appuyer sur le bouton code html et ensuite copier mon code html et refermer avec le bouton code html.

A+

Il te faut tout simplement mettre une balise [ code] au début de ton code html puis une balise [ /code] à la fin de ce même code, puis répéter l'opération pour le code css.
(Les espaces dans les crochets n'existent pas, mais j'ai du les ajouter pour que la balise s'affiche, sinon elle est transformée en balise html et n'apparait pas).

ok Mikachu c'est bien ce que j'ai compris.

Le code de Ladytron permet uniquement de rendre le menu plan d'accès actif, lorsque je clique sur les liens Tarifs ou Cours ceux ci ne sont pas marqués actif et c'est toujours le menu Plan d'accès qui est toujours actif.
Je rappelle que mes ancres sont situées sur une page appelé infos_pratiques.html.

help

kercroam a écrit :
ok Mikachu c'est bien ce que j'ai compris.

Dans ce cas, je te remercie de bien vouloir prendre la peine d'éditer ton premier message pour le rendre conforme à l'aide des balises de code

ok voila qui est fait

Salut
Comme il existe une confusion avec l'utilisation de la pseudo-classe :active.
J'ai réecris mon code en remplacant active par en_cours.
Le problème est que je ne vois pas comment appliquer le changement de couleur pour les ancres Tarifs et Cours, puisque sur l'exemple ci-dessous c'est Plan d'accès qui est sélectionné.
J'ai un menu vertical avec un menu appelé Infos Pratiques qui pointe vers la page infos_pratiques.html et qui contient mes 3 ancres.

Qui a la solution?

<!-- Menu d'accès rapide--> 
            <ul id="menuhorizontal"> 
<li><a href="contact.html">Contact</a></li> 
<li class="en_cours"><a href="#plan_d_acces">Plan d'accès</a></li> 
<li><a href="#tarifs">Tarifs</a></li> 
<li><a href="#cours">Cours</a></li> 
<li><a href="index.html">Retour accueil</a></li> 
            </ul>

#menuhorizontal  li a:hover { 
   background: #f5d7b4;
   color: #930;
   }
   
#menuhorizontal a:en_cours { 
   background: #c60;
   color: #fff;
   }
   
#menuhorizontal li.en_cours a { 
   background: #c60; 
   color: #fff; 
   border: 1px solid #c60; 
   }