[Resolu] Menu horizontal, rollover avec image et probleme de taille

Bonjour a tous !

Je suis en train de faire un nouveau design pour un futur site et je suis en train de faire le menu horizontal avec un rollover (affichage d'une image au survol)

Voila le code :

<div id="global">
<div id="header"></div>
<div id="menu">
<ul>
<li id="active"><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
</ul>
</div>
...

CSS :

#global {
  margin-left: auto;
  margin-right: auto;
  width: 748px; /* largeur obligatoire pour être centré */
  text-align: left; /* on rétablit l'alignement normal du texte */
}
#header{
  background-image: url('images/vacancia.jpg') ;
  background-repeat: no-repeat ;
  height: 195px;
}
#menu{
  background-image: url('images/menu.jpg') ;
  background-repeat: repeat-x ;
  height: 45px;
  width: 748px;
}
#menu ul{
  margin: 0px;
  list-style-type: none ;
  padding-top: 10px;
  height:45px;
}
#menu li{
  display: inline;
  height: 100%;
  margin-left:10px;
}
#menu li a{
  display: inline;
}
#menu li a:hover{
  background-image: url('images/menu-over.jpg');
  background-repeat:no-repeat;
}

j'ai essayer plusieurs choses mais rien ne marche, en effet le rollover marche bien mais l'image menu-over n'est pas affichée entièrement, elle est afficher tout juste derriere le lien :'(

Ma question comment faire pour definir la taille d'un backgound d'un a:hover ou encore un li:hover ?

Merci , Ron
Modifié par Ronan (13 Apr 2007 - 22:49)

Hello

Avoir la même taille d'image et de <li> ce n'est pas possible ?

J'pense pas que redimensionner comme tu le souhaites soit possible, plutôt que d'adapter ton image au lien, essaye d'adapter ton lien à ton image.

Bonsoir,

Tu demandes à tes éléments de liste <li> et tes liens <a> de se comporter comme des éléments inline.
Dans ces optique-là, il ne pourront pas recevoir de taille ou largeur spécifique.
Par conséquent, ton arrière-plan n'apparaîtra que sur ton lien. Il s'agit-là d'un comportement tout à fait normal.

Pour bien comprendre la différence entre les balise de type inline et les balises de type block, je te conseille la lecture ci-après : La structure des balises : bloc et en-ligne

De plus, je pense que tu pourrais te dispenser du <div> menu qui ne sert qu'à contenir ta liste de lien.
Pourquoi ne pas affecter directement les caractéristiques à l'élement ul ?
Modifié par Cygnus (13 Apr 2007 - 21:23)

BeliG a écrit :
J'pense pas que redimensionner comme tu le souhaites soit possible, plutôt que d'adapter ton image au lien, essaye d'adapter ton lien à ton image.

Attention à ce genre de conseil ...
Pense aux personnes qui vont vouloir agrandir la taille de la police pour une meilleure visibilité, par exemple ...

Il est toujours plus pertinent d'adapter la mise en forme au contenu que l'inverse.

en effet, mais je ne vois pas comment resoudre mon probleme

As-tu lu le document sur les types de balise ?
As-tu bien compris la différence ?

Plutôt que d'aligner tes éléments de ligne et tes liens par l'intermédiaire de l'instruction display:inline; préfère l'utilisation de l'instruction float:left;
Appliques ensuite un dislay:block;à tes liens pour qu'ils puissent recevoient des dimensions ou des marges.

Cygnus a écrit :
As-tu lu le document sur les types de balise ?
As-tu bien compris la différence ?

Plutôt que d'aligner tes éléments de ligne et tes liens par l'intermédiaire de l'instruction display:inline; préfère l'utilisation de l'instruction float:left;
Appliques ensuite un dislay:block;à tes liens pour qu'ils puissent recevoient des dimensions ou des marges.

Dans ce cas la je ne vais plus utiliser les balises <ul> et <li> mais des div

j'essaye !

Ronan a écrit :
Dans ce cas la je ne vais plus utiliser les balises <ul> et <li> mais des div

j'essaye !

euh ... euh ... euh ...
Ce n'est pas tout à fait ce que j'avais en tête !
Ton menu est une liste de lien, et l'utilisation d'une liste est tout à fait appropriée.

Je te conseille plutôt d'aller faire un tour dans la galerie des menus et de jeter un œil aux codes sources proposés.
Je suis sûre qu'il y en a au moins un qui correspond à ce que tu veux obtenir.