[Résolu] CSS et menu : modifier l'élément actif

Bonjour à tous, je suis perdu dans mes classes et identifiants !

Je suis débutant, mais çà vous l'avez compris

Voici mon code CSS:

div.moduletable_menu2 .menu             { clear: both; padding: 0 0 0 0; margin: 0 0 15px 0; width:160px; list-style:none; background:transparent;}
div.moduletable_menu2 .menu li          { padding:0; margin:0 0 1px 0; height:40px; display:block;}
div.moduletable_menu2 .menu li a        { text-align:left; height:40px; padding:0px 25px;font:10px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('../images/verMenuImages2.png') 0px 0px no-repeat; text-decoration:none; outline:none;}
div.moduletable_menu2 .menu li a:hover  { background:url('../images/verMenuImages2.png') 0px -40px no-repeat; color:rgb(255,255,255);}
div.moduletable_menu2 .menu li a.active, div.moduletable_menu .menu li a.active:hover{background:url('../images/verMenuImages2.png') 0px -80px no-repeat; color:rgb(255,255,255);}
div.moduletable_menu2 .menu li a span   { line-height:40px;}

Voici mon code HTML:

<div class="moduletable_menu2">
 <h3>Menu principal</h3>
  <ul class="menu">
    <li id="current" class="active item100001"><a href="#"><span>xxx</span></a></li>
    <li class="item100002"><a href="#"><span>yyy</span></a></li>
   </ul>
</div>

Je voudrais que mon élément de menu actif (id="current") soit avec un autre fond, ce que j'ai essayé de faire avec :

div.moduletable_menu2 .menu li a.active, div.moduletable_menu .menu li a.active:hover{background:url('../images/verMenuImages2.png') 0px -80px no-repeat; color:rgb(255,255,255);}

Mais sans succès

J'ai donc besoin de votre lumière !
Merci d'avance...
Modifié par titkay (27 Aug 2010 - 16:42)

Pourquoi ne pas utiliser l'id #current dans ce cas si tu en mets un dans le html autant s'en servir pour les css ?
Et sinon ton code css ne marche pas parce que tu mets la propriété background dans :

 a.active 

mais aucun lien "a" n'a de class ". active" dans ton html.

C'est l'élément de liste "li" qui a une class appelée ".activ" donc tu devrais mettre dans le css

 li.active a

ou juste

li.active

en fonction de si tu veux agir sur le lien ou sur l'élément de liste qui contient le lien.

Voilà... et sinon petit conseil en passant, j'ai l'impression qu'il y a beaucoup de class déclarées dans ton html qui à mon avis sont complètement inutiles. Renseigne toi sur comment on fait pour cibler un élément précis en css par exemple en l'appelant uniquement avec la class/id de son parent.

Ici par exemple :

.moduletable_menu2 li a { }

suffirait pour les liens de ton menu2. De même, pour cibler plus précisément ton lien de la page courante

#current li a {}

suffirait aussi.

Voilà bon courage à toi !

Benh j'ai généré le CSS depuis le site cssmenubuilder, et j'essaye de l'intégrer dans Joomla... Donc pas facile de s'y retrouver, surtout que Joomla génère pas mal de code !

Vais essayer...

J'ai essayé sur tes conseils ceci, et çà ne vas pas pour le #current :

.moduletable_menu2             { clear: both; padding: 0 0 0 0; margin: 0 0 15px 0; width:160px; list-style:none; background:transparent;}
.moduletable_menu2 li          { padding:0; margin:0 0 1px 0; height:40px; display:block;}
.moduletable_menu2 li a        { text-align:left; height:40px; padding:0px 25px;font:10px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('../images/verMenuImages2.png') 0px 0px no-repeat; text-decoration:none; outline:none;}
.moduletable_menu2 li a:hover  { background:url('../images/verMenuImages2.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.moduletable_menu2 li a span   { line-height:40px;}
#current li a                  { background:url('../images/bg3.jpg') 0px -40px no-repeat; color:rgb(255,255,255);}

Ce code HTML est généré par Joomla, donc je ne paux pas trop y toucher, ci ce n'est créer des classes comme "menu" et "moduletable_menu2" (ce que j'avais fait) :

<div class="moduletable_menu2"> 
 <h3>Menu principal</h3> 
  <ul class="menu"> 
    <li id="current" class="active item100001"><a href="#"><span>xxx</span></a></li> 
    <li class="item100002"><a href="#"><span>yyy</span></a></li> 
   </ul> 
</div> 

Modifié par titkay (27 Aug 2010 - 15:19)

J'ai trouvé, voici la solution

div.moduletable_menu2 li#current a { background:url('../images/verMenuImages2.png') 0px -80px no-repeat; color:rgb(255,255,255);}