[Résolu] Modifier menu css à tiroirs.

Bonjour

Je souhaiterai apporter une dernière touche à ce site
http://www.chalets-de-pierretoun.com/denise/index.html
sur la barre de menu horizontale, j' essai en vain depuis quelques jours de mettre en "background" sur la balise <li> de la page affichée l' image gif de couleur rouge afin que l' internaute puisse savoir rapidement sur quelle page il se trouve.....

Si vous avez une piste.....?

Merci

Bonne journée


code css du menu :

/* menu horizontal haut */
#nav
{
background-image: url(img/nav1.gif);
font-size: 1em; 
color: #006600; 
font-family: verdana; 
text-align: left;
float: left;
width: 100%;
margin-bottom: 1em;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav li {
margin: 0; 
padding: 0;
display: inline;
}
#nav li a:link, #nav li a:visited {
display: block;
float: left;
height: 16px;
line-height: 16px;
text-decoration: none;
text-align: center;
background: url() repeat-x;
padding: 0 13px;
color: white;
text-decoration: none;
}
#nav li a:hover, #nav li a:active {
background: url(img/nav2.gif) 0 -16px;
padding: 0 13px;
color: white;
text-decoration: none;
} 

Code html :

<!-- menu haut -->
<div id="nav"><div id="nav2"><a href="english.html"><img src="img/gb.jpg" alt ="english" width="30" height="14" class="img_no" /></a></div>
<ul>
<li><a title="" href="index.html">Accueil </a></li>
<li><a title="" href="chalets.html">Les chalets </a></li>
<li><a title="" href="activites.html">Activit&eacute;s</a></li>
<li><a title="" href="acces.html">Acces</a></li>
<li><a title="" href="bastide.html">La Bastide Clairence </a></li>
<li><a title="" href="basque.html">Pays Basque </a></li>
<li><a title="" href="ecrans.html">Fond écrans</a></li>
<li><a title="" href="contact.php">Contact</a></li>
</ul>
</div>

Modifié par africa (05 Dec 2007 - 21:21)

Dans ton code html, il faut que tu ajoutes une class permettant d'indiquer quel est le menu correspond à la page active. Par exemple ça pourrait ressembler à ça :

<!-- menu haut -->
<div id="nav"><div id="nav2"><a href="english.html"><img src="img/gb.jpg" alt ="english" width="30" height="14" class="img_no" /></a></div>
<ul>
<li><a title="" href="index.html">Accueil </a></li>
<li><a [#red]class="pageactive"[/#] title="" href="chalets.html">Les chalets </a></li>
<li><a title="" href="activites.html">Activités</a></li>
<li><a title="" href="acces.html">Acces</a></li>
<li><a title="" href="bastide.html">La Bastide Clairence </a></li>
<li><a title="" href="basque.html">Pays Basque </a></li>
<li><a title="" href="ecrans.html">Fond écrans</a></li>
<li><a title="" href="contact.php">Contact</a></li>
</ul>
</div>

Bien que je ne soit pas sur qu'il soit encore utile de garder ce menu sous forme d'hyperlien... Mais c'est une autre histoire.

Ensuite, il faut juste que tu définisses ta class #nav li a.pageactive avec les même propriétés que #nav li a:hover, j'imagine.

Bonsoir

Merci "Fleuveblanc", j'y suis arrivé

Bonne soirée