Forum d'entraide PHPFrance

Bonjour à tous,

J'essaye de créer un menu horizontal avec effet roll over (images).
Ceci fonctionne:

a.menu_item 
{
	background-image:url(../images/bouton_off.gif);
	height: 26px;
	width: 150px;
	display: block;
	margin: 0px;
}

a.menu_item:hover 
{
	background-image:url(../images/bouton_on.gif);
	height: 26px;
	width: 150px;
	display: block;
}

Le problème est le display: block.
Si je l'enlève, plus rien ne marche.
Si je le mets, mon menu fonctionne mais il devient vertical car chaque item est renvoyé à la ligne.

Comment puis-je faire pour garder en même temps un menu horizontal et un effet background image?

Merci pour vos réponses.

Bonjour,

a.menu_item 
{
	background-image:url(../images/bouton_off.gif);
	height: 26px;
	width: 150px;
	display: block;
	margin: 0px;

        float:left;
        clear:none;
}

a.menu_item:hover 
{
	background-image:url(../images/bouton_on.gif);
}

clear:none; permet aux éléments de type block de s'empiler horizontalement, et float:left; active le "clear" en passant en positionnement flottant (dans le block conteneur).

J'ai aussi enlevé les répétitions dans le :hover car elles sont inutiles (car les deux règles désignent les mêmes éléments, la première est générale et la deuxième correspond à un changement d'état) et gênent la lecture du code.

@+

Est-ce que le "clear: none" est nécessaire ? Je crois me rappeler qu'il s'agit de la valeur par défaut, donc si aucun autre "clear" n'apparait dans la feuille de style il devrait être redondant non ?

Au passage, pour des rollovers plus efficaces pensez aux "CSS sprites". Un petit coup de Google m'a permis de trouver ce lien : http://css.alsacreations.com/Tutoriels- ... age-unique

Pour résumer, plutôt que d'utiliser une image pour chaque état, on n'utilise qu'une seule image, une sorte de "planche" de tous les états (voire de tous les boutons) et on change l'attribut "background-position" pour afficher la bonne vignette. Par exemple, si le bouton normal (disons de taille 100 x 50) est en haut et le bouton survolé est 50 px plus bas, il faut faire remonter l'arrière plan de 50 px et le CSS ressemble alors à Au passage, cette technique permet un chargement plus rapide et pour peu que tu compresses en PNG il se peut que la planche de 2 ou 3 états soit à peine plus grosse qu'un seul état.