28221 sujets

CSS et mise en forme, CSS3

Barre menu avec images et roll over

Bonjour

J'ai picoré à droite et à gauche sur le net des infos pour faire une barre de menu avec images. Ces images doivent avoir un roll over. 

<div class="barreMenu"> 
<a class="imageselection" href="#"></a> 
<a class="imagedossiers" href="#"></a> 
<a class="imageradio" href="#"></a> 
</div>


avec la feuille de style suivante pour définir la taille du div, gérer les bordures des images et empêcher le retour à la ligne de mes images : 

#barreMenu { width: 469px; text-align: left; white-space: nowrap; } 
#barreMenu img { border: 0; } 
#barreMenu a img { border-style: none; }


et pour les rollover j'ajoute à la feuille de style : 

a.imageselection { 
display: block; 
width: 203px; 
height: 38px; 
background-image: url(IMG/menu_selection_off-fr.gif); 
background-repeat: no-repeat; 
} 

a.imageselection:hover { 
background-image: url(IMG/menu_selection_on-fr.gif); 
} 
a.imagedossiers { 
display: block; 
width: 99px; 
height: 38px; 
background-image: url(IMG/menu_dossiers_off-fr.gif); 
background-repeat: no-repeat; 
} 

a.imagedossiers:hover { 
background-image: url(IMG/menu_dossiers_on-fr.gif); 
} 
a.imageradio { 
display: block; 
width: 167px; 
height: 38px; 
background-image: url(IMG/menu_radio_off-fr.gif); 
background-repeat: no-repeat; 
} 

a.imageradio:hover { 
background-image: url(IMG/menu_radio_on-fr.gif); 
}


Les images sont bien en roll over, mais elles ne sont pas alignées l'une à côté de l'autre comme prévues mais l'une en dessous de l'autre.

Merci pour votre aide.
Philippe
Salut,

Je pense qu'avec des "display:block" tes ancres sont forcément disposées en-dessous des unes des autres sans autre précision de positionnement. Ajoutes un "float:left;" dans les classes de tes ancres dans ton css, et ça passera. Smiley cligne

Tiens-moi au courant.
A mon avis il faudra aussi virer les margin et padding des a ou alors agrandir le div conteneur pcq là il fait pile poil la somme des a.
Cela dit il est bien mieux d'utiliser une seule image qui contient les deux états de ton rollover cote à cote et d'en déplacer le positionnement au rollover (background-position). Vu que c'est la même image il n'y aura pas de chargement au premier passage, une sorte de preload en somme.
Sujet clos
Aller à