Comment fait on pour faire apparaitre un fond qui recouvre toute la largeur du menu lorsqu' on survol un <li>

Sujet résolu

27 janvier 2006 à 8:05:33

Je sais pas comment faire pour faire comme dans le menu de ce site: ICI.Quand on survol un <li>ça affiche la barre bleu mais sur toute la largeur du menu !
Voici mon code !

/* Le menu */

#menu
{
float: left;
width: 125px;
clear: left;

}

.element_menu
{
background-color: rgb(99,101,99);
background-image: url;
background-repeat: no-repeat;
margin-top: none;

border-bottom: 1px solid red;

margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu h5
{
color: white;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
margin-top: 3px;
}

.element_menu ul
{
list-style-image: url("puce_menu.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
.element_menu li:hover
{
background-image: url("survollien.png");;
}

.element_menu a
{
color: white;
font-family: Arial;
font-size: 11px;
}

.element_menu a:hover
{
list-style-image: url'puce_menu2".png);
}

.banniere_gauche img
{
padding: 4px;
border: none;
}
.banniere_gauche a:hover
{
background-color: rgb(99,101,99);
}

jp949

27 janvier 2006 à 8:36:08

.element_menu a {display:block; width:YYpx; height:YYpx;}

xp77

28 janvier 2006 à 15:35:44

Ca marche pas. Ca me déforme mon menu.

Anonyme

28 janvier 2006 à 15:53:55

bah si ça fontcionne, exemple de mise en page :

<a href="***">***</a>
<a href="***">***</a>
<a href="***">***</a>

Comme c'est des block ça impose un retour à la ligne, et pour la puce et bien tu met <img src="" /> dans ton lien, et si tu utliste notepad tu appuys sur Ctrl+d et ça te créer la meme ligne dessous

Tu n'a pas besoni de mettre de with ni de height (sauf le height à la limite, pour espacer les liens) car un block par défaut prend toute la largeur qu'on lui propose, si tu le met sur une page html vierge il va prendre toute la largeur du site, si tu le met dans uen div menu il va prendre toute la largeur du menu etc.