Bonjour!

Je dispose d'un menu en haut de ma page web. Lorsque je passe avec la souris dessus une image vient se placer à gauche du lien sur lequel on est.

Jusqu'à là tout se passe bien!!


Mon problème réside dans le fait que les autres lien qui se trouve sur la droite du lien séléctionner se déplace aussi chaque fois que je passe la souris sur le lien désiré. L'affichage de l'image cause cette perturbation.

Y-aurait-il une solution afin que les liens ne se déplace pas??

Voici le code que j'utilise :

[#green] 
.menuTopBusiness a:hover {
	background-image:url(img/Business.gif);
	background-repeat:no-repeat;
	background-position:1% 50%;
	padding-left:25px;
	color: #00000;
}

.menuTopBusiness a{
	text-decoration: none;		
	padding-left:10px;
	padding-right:10px;
	color: #000000;
}

.menuTopBusiness{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align:justify;
	color: #00000;
}
Salut Smiley smile

Tente donc :

.menuTopBusiness a {
     ...
display:block; }

Sinon tu peux t'en sortir en fixant des tailles (width:...px) assez grandes (plus grandes que ton texte + image)...

T'as une page en ligne ? Smiley smile
Ben c'est normal que ca se déplace il me semble...

Le lien au repos, il a un padding de 10px a gauche et à droite (donc de 20 au total), tandis qu'en mode hover, il a un padding unique de 25 px a gauche...

Autrement dit, les largeurs de liens font :

(largeur du mot) + 20px en "normal"
(largeur du mot) + 25 px en "hover"

Donc tous les liens à droite doivent être décalés de 5 px dès que tu passe sur l'un des liens... Pour que l'opération se déroule sans décalage, veille à ce que la somme des paddings (et margin si il y en a) soit la même en mode hover et en mode normal, je pense (j'espère) que c'est aussi simple que ca.


Autrement dit un truc du genre :



.menuTopBusiness a:hover {

	background-image:url(img/Business.gif);
	background-repeat:no-repeat;
	background-position:1% 50%;
	[b]padding-left:26px;[/b]
	color: #00000;

}



.menuTopBusiness a{

	text-decoration: none;	
	[b]padding-left:13px;[/b]
	[b]padding-right:13px;[/b]
	color: #000000;

}

Merci

J'ai essayé avec des largeurs assez grande dans mon menu et ça fonctionne très bien!

Merci encore