:hover sur bouton de menu...

02 janv. 2007, 16:52

Bonjour à tous,
je suis actuellement en train de faire un petit menu horizontal, ça marche, mais maintenant, je souhaite changer le background au survol de la sourie, seulement, je ne sais pas pourquoi, la balise a ne evut pas prendre toute la hauteur, du coup le background de dessous est encore visible...
voici les différents bout de code:
html:

Code : Tout sélectionner

<div id="center">
  <!-- ... -->
  <ul id="menu">
    <li><a href="produits.html" title="Liste des produits">Produits</a></li>
    <li><a href="plan.html" title="Plans d'accès">Plan</a></li>
    <li><a href="contact.html" title="Contactez-nous!!">Contact</a></li>
    <li><a href="#" title="Changez le fond de page" onClick="changestyle(); return false;">Style</a></li>
  </ul>
<!-- ... -->
</div>

css:

Code : Tout sélectionner

#center ul#menu {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 2em;
  text-align: center;
  list-style-type: none;
  background-image: url(menu1.png);
}

#center ul#menu li {
  display: inline;
  padding: 0px;
  margin: 0px;
  height: 100%;
  padding-left: 5px;
  padding-right: 5px;
}

#center ul#menu li a {
  text-decoration: none;
  font-weight: bold;
  color: gray;
  line-height: 2em;
  width: 100%;
}
#center ul#menu li a:hover {

  background-image: url(menu1_survol.png);
  width: 100%;
}

et liens vers la page: http://puffins.fr/plbrun/

voilà merci d'avance!

02 janv. 2007, 17:32

faut placer le :hover sur le li sinon ça prend juste la taille du lien.

02 janv. 2007, 17:35

je sais bien que tout serai bien plus facile si je mettait le :hover sur li, seulement pour rester compatible avec ie6, je doit le laisser sur a, donc la question revient à dire:
comment faire pour que mes balises a prennent toute la hauteur de leur conteneur?

02 janv. 2007, 17:40

La balise "a" n'a pas de dimension

il faut donc que tu donnes une dimension à son conteneur, au "li", et que le lien soit en width: 100% et height: 100%

Plus d'info : http://css.alsacreations.com/Constructi ... horizontal

02 janv. 2007, 17:51

bon ben visiblement ça marche pas....

j'ai essayer en mettant une hauteur fixe 30px à ul et li, puis un height: 100% sur a, mais rien à faire...

02 janv. 2007, 17:54

je viens de m'apercevoir d'une chose, en fait le a prend bien toute la hauteur de mon li, c'est le li qui prend pas toute la hauteur d'ul... pourtant j'ai bien enlevé tout les padding/margin

02 janv. 2007, 17:56

Désolé pour message précedent il est completement hors sujet, si un modo passe par là :p

Sinon peut etre une solution un <a> ne porte pas forcément sur un texte mais sur un élement donc tu peux essayer :
<li><a href="#"><p>ton lien</p></a></li>
ou
<a href="#"><li>ton lien</li></a>

Dans la premiere solution fixe la taille de p en pourcentage par rapport a ton li
Dans la deuxieme place le hover sur li quoi que sur le a ça peut aussi marcher

02 janv. 2007, 18:02

pas de problème pour l'autre message...
pour ta proposition, elle n'est pas valide, car étant de type inline, la balise a n'accepte pas de balise à l'intèrieur...

02 janv. 2007, 18:15

http://exploding-boy.com/images/cssmenus/menus.html

02 janv. 2007, 19:31

merci xenon, j'ai changer mon menu, et ça fonctionne!
Par contre j'ai un autre soucis:, sur mon header, sous ie le header est coller en haut, tandisque sous firefox, il y a une marge de 21px, qui correspond d'après firebug, à un "offset", qu'est-ce que c'est que ça? j'ai jamais entendu parler de cette propriétée

02 janv. 2007, 19:34

Essaie d'enlever le padding et margin de body.

02 janv. 2007, 19:42

déja fait...

voici le css complet

Code : Tout sélectionner

html, body{ 
  padding:0px;
  margin:0px;
}

#corp {
  background-image: url(fond.jpg);
  background-position: center top;
}

#center {
  padding: 0px;
  margin: 0px;
  width: 698px;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -350px;
  border-left: 1px solid gray; 
  border-right: 1px solid gray; 
}

#center #head {
  width: 100%;
  text-align: center;
  background:#BBD9EE;
}

#tabs {
  float:left;
  width:100%;
  background:#BBD9EE;
  font-size:93%;
  line-height:normal;
  padding: 0px;
  margin: 0px;
  margin-top: -22px;
}
#tabs ul {
  margin:0;
  padding:10px 10px 0px 225px;
  list-style:none;
  width: 100%;
}
#tabs li {
  display:inline;
  margin:0;
  padding:0;
}
#tabs a {
  float:left;
  background:url("tableft.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
}
#tabs a span {
  float:left;
  display:block;
  background:url("tabright.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
  color:#FF9834;
}
#tabs a:hover {
  background-position:0% -42px;
}
#tabs a:hover span {
  background-position:100% -42px;
}
      
h3#entete {
  margin-top: 60px;
}

et le html complet:

Code : Tout sélectionner

<body id="corp">
<div id="center">
  <div id="head">
    <h1>Scierie Paul-luc Brun</h1>
  </div>
  <div id="tabs">
  <ul>
    <li><a href="produits.html" title="Liste des produits"><span>Produits</span></a></li>
    <li><a href="plan.html" title="Plans d'accès"><span>Plan</span></a></li>
    <li><a href="contact.html" title="Contactez-nous!!"><span>Contact</span></a></li>
    <li><a href="#" title="Changez le fond de page" onClick="changestyle(); return false;"><span>Style</span></a></li>
  </ul>
  </div>
<h3 id="entete">bonjour</h3>
</div>
</body>

03 janv. 2007, 02:12

Enlève le margin et padding pour h1.

03 janv. 2007, 20:01

c'est bon

merci ça fonctionne!!!
résolu

:hover sur bouton de menu...

Qui est en ligne