Bonjour à toutes et à tous,

J'ai créé un site sous Joomla. J'ai donc un menu généré par ce dernier.

Ce menu contient un fond et des liens.
Voici le bout de code dans l'index.php qui appelle ce menu :

Code: Tout sélectionner

<div id="top" class="header">
<a href="http://www.carreprivileges.com/index.php?option=com_content&view=article&id=53" alt="Carre Privileges" class="logo_header"></a>
<jdoc:include type="modules" name="top" style="xhtml" />

</div> 

Mon css qui accompagne ce menu :

Code: Tout sélectionner

.moduletable_menu {
background:url('/templates/carre_privileges/images/topmenu.png') no-repeat right bottom;
width:760px;
height:50px;
color:#ccad5c;
text-align:center;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
margin-top:8px;
margin-right:auto;
margin-left:auto;
float:right;
line-height:50px;

   }
   
.moduletable_menu a{
width:760px;
height:50px;
color:#ccad5c;
text-align:center;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
margin-top:8px;
margin-right:auto;
margin-left:auto;
line-height:50px;
   }

   
.moduletable_menu  a:hover{
color:#fff;
height:50px;
/* border:solid 1px #fff; */
background:url('/templates/carre_privileges/images/over.png') repeat right top;
   }
   
.mainlevel a{
height: 50px;
}

.mainlevel a:hover{
height: 50px;
}

La class moduletable_menu est générée par Joomla, donc j'ai du la rajouté dans mon css. Idem pour la class mainlevel.

Situation  :
Lorsque l'on passe la souris sur un lien du menu, le over s'applique bien (texte blanc et fond avec l'image). Sauf que l'image ne prends pas toute la hauteur du menu, soit height:50px;

Résultat attendu :
Lorsque l'on passe la souris : le texte devient blanc et le fond change en une image qui prend toute la hauteur.

Info : taille de l'image width: 1px; height: 50px; top left repeat;

Si quelqu'un a une idée  

merci!!

M.

ps : s'il manque quelque chose pour l'analyse n'hésitez pas, je poste :)
pps : je joins 3 screens : menu, menuOver et celui qui devrait être bon : menuOverGood

Salut Michel ,
je crois que ton hover est entrain de s'applique que a l'élément "a" alors que toi tu toi tu vuet que ca se fasse sur l'element "li"

GB

gingebean a écrit:Salut Michel ,
je crois que ton hover est entrain de s'applique que a l'élément "a" alors que toi tu toi tu vuet que ca se fasse sur l'element "li"

GB

Salut GB

C'est vrai que je n'ai pas pensé à ça. Je vois ça dans la matinée et te dis si ça marche...ou pas. :)

Merci.

Edit -- Lun 25 Juil 2011 14:40 --

gingebean a écrit:Salut Michel ,
je crois que ton hover est entrain de s'applique que a l'élément "a" alors que toi tu toi tu vuet que ca se fasse sur l'element "li"

GB

Bon et bien j'ai trouvé la solution. Merci de m'avoir mis la "puce" à l'oreille ;)

J'ai rajouté du display:block; sur les a et a:hover pour que soit pris en compte toute la hauteur de mon lien. J'ai joué aussi avec les paddings et j'ai ajouté aussi un float:left;
J'ai supprimé la class mainlevel qui n'est qu'une interprétation du navigateur.

Voici mon CSS corrigé :

Code: Tout sélectionner

.moduletable_menu {
background:url('/templates/carre_privileges/images/topmenu.png') no-repeat right bottom;
width:720px;
height:50px;
margin-top:8px;
float:right;
padding-left:40px;
   }
   
.moduletable_menu a{
height:44px;
color:#ccad5c;
text-align:center;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
margin-top:2px;
margin-left:5px;
line-height:50px;
float:left;
display:block;
padding:0 10px;
   }

   
.moduletable_menu  a:hover{
color:#fff;
background:url('/templates/carre_privileges/images/over.png') repeat left top;
   }