18079 sujets

Questions générales et questions de débutants

Probleme menu rollover

Salut a tous,
j'ai un petit souci avec les images du menu rollover, la hauteur maximale de l'image ne s'affiche pas. Les images sont rognées.
voici le code
dans la page
<ul id="menu2">
<li><a href="accueil.php">Accueil</a></li>
<li><a href="service.php">Nos services</a></li>
</ul>

dans le css
ul#menu2 li
{
	margin: 10px 10px 10px 10px ;
	padding: 5px ;
	display: inline;
	z-index:3;
}

ul#menu2 li a
{
	display:inline; 
	float : left;
	color: #000;
	text-indent: 0px ;
	text-decoration:none;
	background: transparent 
url(./img_interface/menu/bcontacto.gif) no-repeat; 
	border: 0px solid #dbd ;
	font-size:12px;
	min-height: 300px;
}


ul#menu2 li a:hover
{
	background: 
transparent url(/img_interface/menu/bcontacto.gif); 
	border: 1px solid #f97 ;
	min-height: 400px;
}


Pourtant j'ai indiqué la hauteur width et meme min-height mais ca ne change rien. Le deuxième problème est la largeur qui s'adapte a la taille du texte ce qui est génant car je voudrais avoir la meme largeur pour chaque image. Merci d'avance pour vos suggestions.
Modifié par jeprog (03 Feb 2006 - 16:51)
Salut,
Voici ta css commentée

ul#menu2 li

{
	margin: 10px 10px 10px 10px ;       /*margin: 10px ça revient au même
	padding: 5px ;
	display: inline;
	z-index:3;  /*le z-index est inactif si tu n'as pas la position:absolute donc ici inutile
}

ul#menu2 li a
{
	display:inline; /* valeur par default donc inutile
	float : left;   /* pas utile sauf si tu donnes un height ou un width à tes liens
	color: #000;
	text-indent: 0px ;      /* la valeur 0 est la valeur par default donc 
inutile sauf si tu l'a définit différemment plus haut puisque c'est une propriété héritée
	text-decoration:none;
	background: transparent 
url(./img_interface/menu/bcontacto.gif) no-repeat; 
	border: 0px solid #dbd ; /*cela revient a ne rien mettre
	font-size:12px;
	min-height: 300px;   /* min-height ne fonctionne pas sous IE (voir lien plus bas)
}
ul#menu2 li a:hover
{
	background: 
transparent url(/img_interface/menu/bcontacto.gif); 
	border: 1px solid #f97 ;
	min-height: 400px;  /* min-height n'est pas appliquable aux liens 
(éléments de type en-ligne) et ne fonctionne pas sous IE (voir lien plus bas) 
}


Essaye de donner un height a ton UL ou un line-height a tes lien de la hauteur de ton image.
Modifié par Hermann (03 Feb 2006 - 17:58)
merci Heramann mais ca marche toujours pas. En fait quand je fait un display de type block je peux bien indiquer la hauteur mais moi je veux un menu horizontal et les attributs height et min-height n'ont aucun effet sur la hauteur de l'image, du lien. C'est bizarre!
ul#menu2 li a
{
	display: inline; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 120px ;
	height: 80px ;
	color: #000;
	text-indent: 0px ;
	text-decoration:none;
	background: url(./img_interface/menu/boblique.gif) no-repeat;	border: 0px solid #dbd ;
	font-size:12px;
}
a écrit :
En fait quand je fait un display de type block je peux bien indiquer la hauteur mais moi je veux un menu horizontal


Ben a ce moment là essayes de donner un float:left a tes lien et là il devraient prendre en compte les proproété de taille puisque un élément flottant faire obligatoirement passer son display à block.
Mais n'ayant pas testé je ne suis pas sure que ça fonctionne puisque les flottants sortent du flux.
Si tu veux que les LI s'adaptent a leur lien flottant tu dois aussi leur donner la propriété flot:left au lieu de display:inline.

a écrit :
et les attributs height et min-height n'ont aucun effet sur la hauteur de l'image, du lien. C'est bizarre!


Non c'est normal ton image est en background et tu n'y appliques pas le style directement.
Sujet clos
Aller à