Menu horizontal avec rollover - HTML/CSS - Programmation
MarshPosté le 18-03-2007 à 18:20:46
Bonjour, je suis en train de refaire mon site. J'aimerais faire un menu horizontal. Je voulais le faire avec des images et un effet de rollover en css de préférence. J'ai trouvé un code, il fonctionne mais je ne sais pas l'adapter pour qu'il soit horizontal etant donné qu'on marque display:block; Si je mets 'inline' alors l'effet rollover ne fonctionne plus. Si quelqu'un a une solution ou un autre code ou un bon tuto, il peut m'aider Merci Voila mon code html:
Marsh Posté le 18-03-2007 à 18:20:46
Bonjour, je suis en train de refaire mon site.
J'aimerais faire un menu horizontal. Je voulais le faire avec des images et un effet de rollover en css de préférence.
J'ai trouvé un code, il fonctionne mais je ne sais pas l'adapter pour qu'il soit horizontal etant donné qu'on marque display:block; Si je mets 'inline' alors l'effet rollover ne fonctionne plus.
Si quelqu'un a une solution ou un autre code ou un bon tuto, il peut m'aider Merci
Voila mon code html:
<div id="menuhaut">
<a class="rollover" href="accueil.html"></a>
<a class="rollover2" href="travaux1.html"></a>
<a class="rollover3" href="liens.html"></a>
<a class="rollover4" href="cv.html"></a>
<a class="rollover5" href="contact.html"></a>
</div>
Css:
a.rollover {
display: list-item; width: 101px; height: 35px; background-image: url(../images/accueil.jpg);background-repeat: no-repeat;
}
a.rollover:hover {
background-image: url(../images/accueil2.jpg)
}
a.rollover2 {
display: block;width: 120px; height: 35px; background-image: url(../images/travaux.jpg);background-repeat: no-repeat;
}
a.rollover2:hover {
background-image: url(../images/travaux2.jpg)
}
....