Menu CSS avec rollover

Fermé
tg76 - 31 mai 2011 à 14:22
Bonjour,
Je suis en train de monter un site web, et j'ai créé un menu en CSS qui fonctionne parfaitement, mais tous les boutons sont les uns en dessous des autres et quand je met tous en ligne, j'ai un décalage qui se crée au niveau de mon menu (les deux images apparaissent en même temps).

voici le code utilisé
<head>
<style>
a.A {
background-image: url(Images/Accueil.png);
display: block;
width: 146px;
background-repeat: no-repeat;
}
a.A:hover {
background-image: url(Images/Accueil2.png);
background-repeat: no-repeat;
}
a.B {
background-image: url(Images/Boutique.png);
display: block;
width: 146px;
background-repeat: no-repeat;
}
a.B:hover {
background-image: url(Images/Boutique2.png);
background-repeat: no-repeat;
}
a.C {
background-image: url(Images/Infos.png);
display: block;
width: 146px;
background-repeat: no-repeat;
}
a.C:hover {
background-image: url(Images/Infos2.png);
background-repeat: no-repeat;
}a.D {
background-image: url(Images/Lien.png);
display: block;
width: 146px;
background-repeat: no-repeat;
}
a.D:hover {
background-image: url(Images/Lien2.png);
background-repeat: no-repeat;
}

</style>
</head>

<body>
<div id="menu">
<center><a class="A" href="index.html"><img
style="border: 0px solid ; width: 146px; height: 49px;" alt="Accueil"
src="Images/vide.png"></a><a class="B" href="Boutique.html"><img
style="border: 0px solid ; width: 146px; height: 49px;" alt="Boutique"
src="Images/vide.png"></a><a class="C" href="Info.html"><img
style="border: 0px solid ; width: 146px; height: 49px;" alt="Infos"
src="Images/vide.png"></a><a class="D" href="Liens.html"><img
style="border: 0px solid ; width: 146px; height: 49px;" alt="Liens"
src="Images/vide.png"></a></center>
</div>
</body>

si quelqu'un peut me donner une solution ou au moins une piste sur mon erreur

Cordialement

TG76