Bon dimanche à tous.

Je souhaite mettre en évidence, dans le menu de navigation, le lien actif correspondant à la page affichée. J'ai échoué, d'où ma présence ici...
En clair, lorsqu'on clique sur un bouton, celui-ci change d'aspect au passage de la souris ; je voudrais qu'il garde cet état lorsque la page concernée est affichée.

Voici mon code source CSS actuel :

/* Menu */
 
#menu {
  width: 600px;
  height: 35px;
  padding-top: 13px;
  background: url(images/img04.gif);
}
 
#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
#menu li {
  display: inline;
  text-decoration: none;
}
 
#menu a {
  display: block;
  float: left;
  width: 112px;
  height: 19px;
  padding: 3px 4px 0 4px;
  text-align: center;
  text-decoration: none;
  background: url(images/img05.gif) no-repeat center top;
}
 
#menu .active a, #menu a:hover {
  background-image: url(images/img06.gif);
}

le code html :

<div id="menu">
    <ul>
      <li class="active"></li>
      <li><a href="proprio-apport.html" accesskey="2" title="">Propriétaires</a></li>
      <li><a href="locat.html" accesskey="3" title="">Locataires</a></li>
      <li><a href="liens.html" accesskey="4" title="">Liens</a></li>
      <li><a href="contact.html" accesskey="5" title="">Contact</a></li>
            <li><a href="accueil.html" accesskey="6" title="">Accueil</a></li>
    </ul>
      </div>

et l'une des pages concernées #

Merci d'avance.

Ton menu, il est répété dans chacune de tes pages? Il n'est pas fait grâce à un include?

Si oui, tu n'as qu'à faire une classe spéciale, genre "desactive" et à l'insérer à l'endroit voulu dans le menu sur chacune des pages.

Mon menu est le même pour toutes les pages.

"Si oui, tu n'as qu'à faire une classe spéciale, genre "desactive" et à l'insérer à l'endroit voulu dans le menu sur chacune des pages."

Je ne comprends pas : pourrais-tu faire un ajout au code actuel ?

Merci

Si je te fais ça maintenant, ça risque d'être plein d'erreurs. Il est 4h35 du matin ici.

Si Dreamer ou quelqu'un d'autre n'est pas passé à mon réveil, je verrai ce que je peux faire... à yeux reposés.

Salut

Comme Elle est parti au dodo , je vais juste te demander si le lien doit être coloré sur la page visitée ...Ai-je bien compris ?

Tous les liens du menu (menu horizontal au haut de la page) ont comme fond une image.

Au survol de la souris, ce fond change :

- à l'état inactif, le lien a comme fond l'image img05.gif

- au survol, le lien a comme fond l'image img06.gif (plus foncée)

Je voudrais donc que, lorsque la page concernée par le lien s'affiche, l'image reste img06.gif

et ne retourne pas à son état inactif.

Merci, Dreamer...

Re moi

Je pense que tu devrais utiliser une class dans le lien du menu de ta page , c'est à dire pour la page : proprio-apport.html

<div id="menu">
<ul>
<li class="active"></li>

<li><a href="accueil.html" accesskey="6" title="">Accueil</a></li>
<li><a href="proprio-apport.html" accesskey="2" class="apport">Propriétaires</li>
<li><a href="locat.html" accesskey="3" title="">Locataires</a></li>
<li><a href="liens.html" accesskey="4" title="">Liens</a></li>
<li><a href="contact.html" accesskey="5" title="">Contact</a></li>

</ul>
</div>

Et dans ton CSS , mettre un truc dans ce genre

#menu .apport {
background-image: url(../images/img06.gif);
}

Et faire la même chose dans les autres pages en utilisant une class par page ( class="locataires" , etc .... )

Bon , j'ai pas essayé , mais ça devrait aller !!

A +

Je viens de trouver une page qui évoque ce que je souhaite réaliser (sans le pouvoir jusqu'à présent) :

http://forum.alsacreations.com/faq/faq-30-Comment-marquer-la-page-en-cours-comme-active-dans-le-menu-.html

Un grand merci, Dreamer.

J'ai donc compris que le code html de chaque page concernée par cette particularité doit être complétée par "class="apport"

et que je dois donner à ce class="apport les mêmes propriétés que 'active' et 'hover'.

Je vais essayer ta formule.

jevina a écrit :

Je viens de trouver une page qui évoque ce que je souhaite réaliser (sans le pouvoir jusqu'à présent) :

http://forum.alsacreations.com/faq/faq-30-Comment-marquer-la-page-en-cours-comme-active-dans-le-menu-.html

Oui , eux ils ont mis un id , moi je mets une class , mais le résultat est le même !!

Voilà, j'ai réussi : chaque élément du menu reste dans le style "active" lors de l'affichage de la ou des pages concernées.

En fait c'est assez simple mais j'avoue que je suis passée par des tas de d'échecs avant d'avoir compris.

Merci à Dreamer pour son aide efficace !