[rollover]Problèmes : Margin top et images sous Explorer.

Bonjour à tous

Je suis actuellement en train de refaire mon menu pour un nouveau site. J'utilisais, avant, un rollover JS, mais devant les multiples problèmes rencontrés, je suis passé du coté CSS !

Donc, je suis parti d'un de vos tutoriels (Roll sans JS avec 1 seul image) que j'ai modifié. J'ai (en fait) utilisé 2 images (une "off" et une "on").

Voila ce que done mon code :

.link_menu
{
	float: left;
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 70px ;
	line-height: 50px ;
	color: #000 ;
/*	text-indent: 20px ;  On décale le texte de 40px du bord gauche */
	text-align: center;
	text-decoration: none ;
	background: url(images/boutons/btn_off.png) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 1px solid #dbd ;
}

.link_menu:hover
{
	background: url(images/boutons/btn_on.png) no-repeat 0 0px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 1px solid #f97 ;
	text-decoration: none ;
}

a.link_menu:visited
{
	text-decoration: none ;
}

J'en ai fait un deuxième pour deux images qui sont plus grandes que les autres :

.link_menu_big
{
	float: left;
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 89px ;
	height: 50px;
	line-height: 100%
	color: #000 ;
/*	text-indent: 20px ;  On décale le texte de 40px du bord gauche */
	text-align: center;
	text-decoration: none ;
	background: url(images/boutons/btn_big_off.png) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 1px solid #dbd ;
}

.link_menu_big:hover
{
	background: url(images/boutons/btn_big_on.png) no-repeat 0 0px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 1px solid #f97 ;
	text-decoration: none ;
}
a.link_menu_big:visited
{
	text-decoration: none ;
}

Oui c'est bien tout ça mais vous allez me dire "Où est le problème !"

J'y viens !

1°)Le problème est que ici : http://belle.kawax.com/ le texte "Tarifs et commandes" est trop haut.J'ai bien essayé de mettre un margin-top (d'où le titre) mais rien y fais

Si vous saviez ce que je peux faire je vous en serais reconnaissant

Grand merci,

Bluelight
Modifié par bluelight (12 Sep 2007 - 21:39)

Bonjour,

Je vois que tu as créé une classe spécifique pour ce lien

.link_menu_big

Pourquoi ne pas tester avec une marge intérieure supérieure ?

.link_menu_big {
   padding-top: ... ;
}

Modifié par Sebastien D. (09 Sep 2007 - 17:38)

Merci de ta réponse

Sebastien D. a écrit :
Bonjour,

Je vois que tu as créé une classe spécifique pour ce lien

.link_menu_big

On peut faire autrement ?

Je ne sais pas. Il y a toujours plusieurs solutions.
Là, comme ça, je n'en vois pas d'autres, ta solution est assez simple.
Modifié par Sebastien D. (09 Sep 2007 - 17:41)

En me creusant un peu la tête, j'ai vu que je pouvais (au lieu de copier .link_menu et d'en changer deux propriétés) mettre dans le code html style="code CSS" vu que c'est prioritaire

Vala vala

Nouveau problème :

2°)Les images n'apparaissent pas sous explorer 6, ou du moins bizarrement, dur à definir....
A savoir que j'ai remplacé les 2 png transparents par des gif (btn_off_big.gif et btn_off.gif).

Savez vous pourquoi ?