Tout le monde a sa petite méthode pour centrer un site. Personellement, j’utilisais toujours le même principe avant que ne survienne le drame…

Mon ancienne façon de procéder consistait à décaler une <div> conteneur de 50% de la largeur de la fenêtre à partir de la gauche et de corriger ce décalage avec une marge gauche négative de la moitié de la taille de celle-ci. Comme le montre cet exemple de code :

[css] #conteneur { 	position:relative; 	left:50%; 	width:750px; 	margin:0 0 0 -375px; }

Tout se passait bien avec tout les sites que je réalisais. Mais le drame arriva sournoisement…

Un jour, un client désirai que son site soit en résolution de 1024px fixe. Soit, dis-je, puis j’éxecutai ma besogne sans peine. Le site fût livré, approuvé et certifié.

Puis par une journée ensoleillée – ce qui est rare ici au Havre – mon client m’appella en catastrophe en s’exclamant que sa secretaire était paniquée ! Et oui, son petit écran était en résolution 800×600px. Impossible pour elle de naviguer sur le propre site de l’entreprise car elle n’avait pas accès au menu de gauche !

Mise en situation car un petit dessin vaut mieux qu’un long discours :

En effet, que se passe-t-il ? Si la résolution de la fenêtre du navigateur est inférieure à celle du site, les côtés gauche et droit ne sont plus visibles mais surtout le côté gauche n’est plus atteignable ! Ceci est dû à la marge négative replacant le site. La barre de défilement horizontale apparaît dans un tel cas mais il est impossible de se déplacer vers la gauche. De ce fait, il est impossible pour un visiteur ayant une résolution plus faible que celle du site de se mouvoir à son gré dans les méandres de l’information que lui tente de le pourvoyer le site.

Ce drame fit vaciller mon intégration que je croyais correcte. Mais, c’est en faisant des erreurs que l’on avance ! Je me mis donc à la recherche d’une nouvelle méthode.

Quelques dix minutes plus tard, je me posais la question des marges automatiques. Oui, celles qui se dimensionnent toutes seules et qu’on laisse se débrouiller tellement elles font ça bien. J’avais déjà essayé au temps jadis de les utiliser pour centrer un site mais en vain. Mais depuis j’ai fait un bon bout de chemin et à l’époque je ne savais pas que les marges automatiques ne marchaient pas si l’élément parent ne possédait pas de dimensions précises.

Etait-ce un éclair de génie ?… Non, mais après un Suppr. et quelques tapotements de clavier je codis ceci :

[css] html, body {width:100%;} #conteneur { 	width:750px; 	margin:0 auto 0 auto; }

Et là, Ô miracle de la nature, l’effet escompté était devant mes yeux ébahis. Le site tant sous Firefox que sous Internet Explorer, le site se plaça parfaitement centré et si la fenêtre est plus petite que le site, le site se place à gauche. En voici un exemple (Bon ok, j’ai pas refait un site c’est juste une image).

Une méthode incroyablement simple par rapport à l’ancienne et surtout beaucoup efficace.

Je remercia donc les dieux de la CSS et autre XHTML et mon client, peu conscient de la gravité du problème existentiel qu’il m’avait posé, fût satisfait et on ne le revit plus jamais.

NB: Non, il n’y a pas dans ce post de publicité subliminale pour le formidable outil qu’est le FreePlayer.