28220 sujets

CSS et mise en forme, CSS3

[résolu] Menu horizontal à images réactives

Bonjour,

J'ai un problème pour adapter une méthode de menu à images réactives décrite dans le précieux livre de Raphaël Goetter.

A peu de chose près, mon but est d'obtenir un menu horizontal à images réactives du type de celui présent sur ce site : http://www.slconstantia.com/

J'ai un menu dans ma page, tout ce qu'il y a de plus classique :

<div id="menu">
 <ul>
          <li><a href="#">option1</a></li>
          <li><a href="#">option2</a></li>
          <li><a href="#">option3</a></li>
          <li><a href="#">option4</a></li>
 </ul>
</div>


Toujours selon la méthode du livre, je mets dans ma feuille de style :


#menu a {
display: block;
width: 119px;
height: 83px;
background: url(images/menu01.jpg) no-repeat 0 0;
}

#menu a:hover {
background: url(images/menu01_over.jpg);
}


Cela fonctionne très bien. Je tente donc d'adapter le code pour un menu horizontal cette fois car mes contraintes graphiques me l'imposent.

J'essaye :
#menu li {
display: inline;
}

#menu li a {
display: block;
width: 119px;
height: 83px;
background: url(images/menu01.jpg) no-repeat 0 0;
}

mais mon menu reste vertical

ou
#menu li {
display: inline;
}

#menu li a {
width: 119px;
height: 83px;
background: url(images/menu01.jpg) no-repeat 0 0;
}

mais mes images sont tronquées et n'apparaîssent qu'à l'endroit où mon texte de lien apparaît (les valeurs width et height ne sont pas prises en compte en quelques sortes)

ou encore
#menu li {
display: inline;
}

#menu li a {
display: inline;
width: 119px;
height: 83px;
background: url(images/menu01.jpg) no-repeat 0 0;
}


ne fonctionne pas non plus... enfin si, sur IE 6.0, cela fonctionne à merveille, mais ce n'est pas une référence...

Y a t-il une solution à ce problème ?

Est-il vraiment possible de faire un menu horizontal à images réactives entièrement en css ?

Un grand merci pour votre aide Smiley biggrin
Modifié par Zebuelon (16 Dec 2005 - 10:47)
Administrateur
Zebuelon a écrit :
Merci, cela a l'air de fonctionner.

Je pensais que l'on pouvait faire de même avec la première méthode.
On le peut aussi, mais il est plus avantageux d'employer les portes coulissantes.

Au fait, si le sujet est résolu, n'hésite pas à le marquer comme tel (voir les règles du forum ou la FAQ) Smiley cligne
Sujet clos
Aller à