Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels HTML/CSS

Revigorez vos travaux d’intégration en suivant les prĂ©conisations des instances mondiales de l’Internet !

Tutoriels HTML/CSS

Centrer horizontalement son site en CSS en 4 lignes de code

J’ai recemment dĂ©couvert une nouvelle mĂ©thode pour centrer un site web horizontalement dans une page. Ma solution doit ĂŞtre dĂ©jĂ  utilisĂ© par beaucoup de webmasters tellement elle est simple mais elle a le mĂ©rite d’Ă©viter quelques problèmes d’affichage.

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.


Ce que nos lecteurs en disent :

  1. Ju

    salut! Ah oui je vois que tu te cassais pas mal la tête pour ça :D !
    par contre pourquoi mettre :
    "margin:0 auto 0 auto;"

    et pas directement :
    "margin: auto;"

    c’est ce que je fais et y a pas de problème!

    @++

  2. neak

    Exact ! Moi je met margin-left:auto; et margin-right:auto; mais c la mĂŞme, en gros tu peux centrer ton site en une seule de code et non 4, sinon classe ton site…

  3. Shemu

    hé hé ! il faut obligatoirement attribuer une taille aux balises html et body en mettant un width:100%; ;-)

  4. Ju

    T’es sur shemu ??
    parce que généralement je fais ça :
    _____________________________
    body
    {
    background-image: url("img/image.jpg");
    }

    #site
    {
    width: 760px;
    margin: auto;
    }____________________________

    et pas de problème du coté navigateur et du côté validité !

  5. Shemu

    Ah bah oui… T’as raison Ju !
    C’est pas obligatoire. Cependant, j’ai l’habitude de le laisser par une sĂ©curitĂ©… ;-)

  6. Lego

    J’ai essayĂ©, ca ne marche pas avec ie5 ….

  7. Ben

    salut,
    la soluce "marign: 0 auto;" est bien mais elle ne fonctionne pas sur les IE 5 et 5.5
    Ha c’est vraiment chiant tous ces gens qui ne mettent pas a jour leurs softs! ;)
    Mais IE 5.5 est encore bien présent chez les utilisateurs Lambda! :(
    Alors le mieu est encore de ce caller sur des rĂ©solutions 800×600 et d’utiliser :
    position: absolute;
    width: 768px;
    left: 50%;
    margin-left: -384px;
    Enfin c’est mon avis !
    Tcho

  8. MiLoU

    Bon allez, je vous donne mon secret ;)

    body
    {
    text-align: center /* Pour centrer avec IE*/
    }
    div#general /* div contenant tout le site
    {
    margin-left: auto; /* Pour centrer avec Firefox & co */
    margin-right: auto;
    text-align: left; /* Pour remettre normal */
    width: 80% /* Tout Ă  fait ce que l’on veut ici… */
    }

  9. Guide

    <———————— Lego>
    J’ai essayĂ©, ca ne marche pas avec ie5 ….
    ——————————————————->

    Ca marche si tu as un DOCTYPE valide (en tout cas avec un XHTML 1.0 STRICT, je n’ai pas testĂ© avec d’autres…), mĂŞme sous IE 5

  10. Tellurian

    Salut! Tres bon site!

    Sinon je cherche une metode similaire pour centrer verticalment…
    Pour le moment je fait ca:

    height: 600px;
    margin-top: -300px;
    top: 50%;

    Ca marche tres bien mais ont a le mĂŞme problème que pour le centrage horizontal sur des petites rĂ©solutions…

    @+

  11. Theolediable

    C’est normal que le centrage ne se fasse pas sous IE7?
    En tout cas, félicitations pour le site!

  12. KWHc_

    Pour centrer verticalement, une image par exemple.

    HTML:

    <div id="imageacentrer">
    <img src="imgcntr.jpg" alt="Image Ă  centrer, lolilol." />
    </div>

    CSS:

    #imageacentrer
    {
    position:absolute;
    left: 50%;
    top: 50%;
    width: 800px; /* la hauteur de l’image ou de la zone Ă  centrer */
    height: 500px; /* la largeur de l’image ou de la zone Ă  centrer*/
    margin-left: -4000px; /* mettre la moitié de la largeur */
    margin-top: -250px; /* mettre la moitié de la hauteur */
    border: 1px solid #000;
    }

    Voilà, en espérant avoir pu aider ;)

    @+

  13. mat

    bonjour Ă  tous,

    J’ai un pb pour appliquer ce code Ă  ma page… Je ne suis pas un expert, donc mon pb est peut-ĂŞtre tout simple.
    j’utilise dreamweaver 8 et j’aimerai que mon suite soit visible par tout le mondre. Or, dès que l’on change la rĂ©solution, mon menu est coupĂ©, ainsi que le cadre de contenu placĂ© au milieu du site web…

    Quelqu’un peut-il m’aider, SVP ?

  14. MyMyKuu

    J’ai beaucoup aimĂ© lire cet article qui Ă©tait très intĂ©ressant. Il va me permettre de faire de belles choses qui seront sures !
    ( Par contre "Je codis" c’est moche !
    Imparfait : je codais – PassĂ© simple : je codai – PassĂ© composĂ© : j’ai codĂ© )

  15. Chag

    A priori, il faut mettre un doctype a la page pour que ca centre correctement sous IE

    ex : <!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Strict//EN’ ‘http://www.w3.org/TR/xhtml1/DTD/...

    Chag

  16. Tony-Coasterrider

    Il est clair qu’il faut installer un Doctype correct au dĂ©but pour que le centrage puisse se faire sous I.E. ; Opera et Firefox centre avec ce CSS sans Doctype, mais si vous cherchez Ă  centrer avec un code CSS comme ça, c’est que vous cherchez Ă  respecter un codage strict valide du W3C, donc Doctype oblige. Autrement, vous centreriez directement avec l’attribut align="center" dans la balise <table> si vous ne cherchez pas a valider votre code (x)HTML.

  17. Romain

    Très intĂ©ressant, enfin quelque chose de simple quand on voit la tonne de code qu’on voit sur d’autres sites !

    et joli ce site ;-)

Les commentaires sont clos.