18043 sujets

Questions générales et questions de débutants

Mettre en évidence une page en cours dans le menu

Bonjour,

J'aimerais mettre en évidence la page qui est en cours de visitation par l'internaute. Pour cela, j'ai un menu comme celui ci

<div class="menu">
<ul>
<li class="encours"><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="#">Become an Au Pair</a></li>
<li><a href="#">Host Families</a></li>
<li><a href="#">How to Apply</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>]


et le css

.menu {
  background-image: url(img/menu.png);
  background-repeat:no-repeat;
  width: 935px;
  height: 82px;
  position: relative;
  display: block;
  margin:0 auto;
  right:26px;
}
.menu ul {
  float: none;
  list-style-image: none;
  list-style-type: none;
  }
.menu ul li {
  float: left;
  margin: 0px;
  position: relative;
  margin:35px 31px;
  font-family:"Myriad Pro", Calibri;
  color:#FF0000;
  font-size:18px;
}
.menu ul li a{color:#ee1c8c;}
.menu .encours a{color:#green;}


J'ai déjà suivi ce tuto http://www.alsacreations.com/astuce/lire/28-styles-lien-page-en-cours.html

mais rien ne marche !

Quelqu'un pourrait m'aider ?
Bonjour,

Tu as un petit problème de priorité des selecteurs.

Ceci devrait être plus efficace : 
.menu ul li.encours a{color:#green;}


D'ailleurs la div est-elle vraiment nécessaire ? <ul> peut très bien porter une classe ou un ID.
Merci Anne pour la correction, mais ça n'a rien changé. J'ai toujours les mêmes couleurs pour toutes les rubriques.
Bon ça ne sautais pas aux yeux.

Pour les couleurs, il ne faut pas mettre # lorsque l'on utilise des mots clés. Il faut donc indiquer "green" et non "#green".
Sujet clos
Aller à