Aujourd'hui, à force de tests et d'observations, j'ai compris comment faire une barre de menus à base d'images en XHTML et en CSS. Admettons que notre barre de menus soit dans un div comme ça :
<div id="menu">
<a href="#"><img src="yo01.gif" /></a>
<a href="#"><img src="yo02.gif" /></a>
<a href="#"><img src="yo03.gif" /></a>
</div>Contrainte : je souhaite que ma barre de menu soit longue de 600px. Chacune de mes images fait 200px de long. Je vais donc donner a mon div menu une longueur de 600px. Il faut également gérer la bordure des images et les contours générés par les liens pour que tout soit clean et net d'affichage ;-) Dans la feuille de style on se retrouve avec :
#menu { width: 600px; text-align: left; }
#menu img { border: 0; }
#menu a img { border-style: none; }Or, dans la configuration actuelle, si la personne qui visite mon site redimensionne la fenêtre de son navigateur à moins de 600px de largeur, une partie des images va se retrouver à la ligne. C'est la qu'intervient white-space: nowrap qui va empêcher le retour à la ligne de mes images :
#menu { width: 600px; text-align: left; white-space: nowrap; }Ca marche ! Pour rajouter des RollOvers en CSS, voir les techniques décrites sur cette page.
Joint