Ouvrir la navigation secondaire

Ce billet a plus de deux ans. S'il contient des informations techniques elles sont peut être obsolètes.

Précédent Tu pousses le bouchon un peu loin Morris
Suivant Travaux en cours

XHTML, CSS, images et barre de menu

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.