Rollover qui décale le texte

Bonjour, j'ai créer une page d'essai ou j'ai créer un rollover en css avec la fonction background.

Le problème est que j'ai apliqué des padding pour que l'image d'arrière plan ne soit pas collé au texte ( qui est centré ) et du coup le texte se décale : voir ici

Comment faire pour que le texte reste en place au moment du rollover ?

Merci d'avance

Fr.

EDIT: je cherche aussi comment faire un rollover avec 3 images : 1 au départ, 1 au passage de la souris et 1 quand la souris repart

a.menu{ height: 40px;
	line-height: 40px;
	color:#777878;
	font-size:20px;	
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	text-decoration: none; }

	
a.menu:hover{
	height: 40px;
	line-height: 40px;
	color:#777878;
	font-size:20px;	
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	padding: 5px 5px 5px 5px;
	background:url('rolloverDbleu.gif');
	}

Modifié par frdiard (11 Feb 2009 - 12:55)

Bonjour,

Je suggere d'introduire egalement un padding de 5px (comme vous avez dans la pseudo class :hover) dans la classe a.menu. Ainsi qlq soit la situation (en fonction de la pseudo class) la mise en forme de menu ne "bouge" pas.

Bonjour,

sellig a écrit :
Je suggere d'introduire egalement un padding de 5px (comme vous avez dans la pseudo class :hover) dans la classe a.menu.

C'est en effet la solution au problème.

Par contre, pourquoi tous ces doublons ?

Les styles de la pseudo-classe :hover sont hérités, tu peux donc écrire plus simplement :

a.menu {
[b]padding:5px;[/b]
height: 40px;
line-height: 40px;
color:#777878;
font-size:20px;	
font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
text-decoration: none; }

a.menu:hover {
background:url('rolloverDbleu.gif'); }

Modifié par BeliG (11 Feb 2009 - 14:20)