Aligner horizontalement des images cliquables

Bonjour.
J'essaye d'aligner horizontalement une liste d'image cliquables qui changent d'état quand on passe dessus.

J'ai fait ceci

<ul>
  <li><a href="#" id="bouton1"></a></li>
  <li><a href="#" id="bouton2"></a></li>
  <li><a href="#" id="bouton3"></a></li>
  <li><a href="#" id="bouton4"></a></li>
  <li><a href="#" id="bouton5"></a></li>
  <li><a href="#" id="bouton6"></a></li>
  <li><a href="#" id="bouton7"></a></li>
</ul>

Et voici le CSS

#bouton1{
display: block;
background: url(images/5.png) no-repeat top left;
width:84px;
height:45px;
position: relative;
	top: 0;
	left: 0;

}
#bouton1:hover {
background: url(images/5.png) no-repeat 0px -45px;

}
ul{
list-style-type:none;
display : inline;
margin:20px;
}
li{
margin-top:2px;
display : inline;
list-style-type:none;
}

#bouton2{
display: block;
background: url(images/15.png) no-repeat top left;
width:84px;
height:45px;
position: relative;
	top: 0;
	left: 0;

}
#bouton2:hover {
background: url(images/15.png) no-repeat 0px -45px;

}

Pourquoi les images se mettent les une sous les autres?

Cordialement.
Merci
Modifié par marseille (01 Oct 2006 - 13:33)

marseille a écrit :

Pourquoi les images se mettent les une sous les autres?

Cordialement.
Merci

Hello,

Tu indiques à tes deux premiers liens d'être en display: block;
De ce fait, ils adoptent le comportement des éléments de type bloc qui est de passer à la ligne (affichage l'un sous l'autre).

Si tu veux absolument donner des dimensions à un élément de type en-ligne tout en conservant son affichage en ligne, il va falloir passer par un positionnement flottant.

Voir les différents exemples :
http://css.alsacreations.com/Galeries-de-menus-en-CSS

EDIT : évite autant que possible d'avoir des liens vides car cela est désastreux pour l'accessibilité de ta page : ces liens/images seront tout simplement inexistant sur les navigateurs et outils non graphiques.
Modifié par Raphael (01 Oct 2006 - 13:59)