[Webmaster] Adapter un site à toutes les résolutions, le centrer

Une question récurrente sur ce forum est "Comment adapter mon site à la résolution du visiteur ? Quelle résolution choisir ?"

Pas besoin de se compliquer la vie pour ça !

Comment faire

Il suffit d'appliquer une largeur relative (=qui change selon la taille de la fenêtre et de l'écran du visiteur) à la page.

Le plus courant est d'utiliser la balise body.
A vous d'adapter si vous utilisez un div#corps ou autre.

Pour adapter la taille de la page, il faut utiliser ce code CSS :

  body{width:100%;}

Avec ce code la page prendra 100% de la fenêtre, quelle que soit sa taille.

On peut évidemment définir la largeur que l'on veut (90%, 80%, etc.)

Si l'on définit une plus petite largeur, on peut centrer avec "margin:auto".

Note

/!\ Attention : il faut définir une largeur en %, et pas en em ou autre unité relative, car les % correspondent à un pourcentage par rapport à la largeur de la fenêtre contrairement aux em qui correspondent aux hauteurs de ligne (une taille prédéfinie).
(Vous n'êtes pas obligé de retenir ceci, si ça vous embrouille ne vous en occupez pas et contentez-vous de suivre les indications suivantes ;-)

Précisions

S'il est important que votre page ne soit pas plus petite qu'une certaine taille, on peut utiliser la propriété min-width (qui ne fonctionne pas sous IE).

On peut également utiliser max-width pour définir la taille maximale.
(Je déconseille cette pratique car ce n'est pas agréable d'avoir une page qui est plus petite que la fenêtre je trouve)

Exemple

Une page de largeur 90%, centrée, une largeur minimale de 600 pixels, et une largeur maximale de 2000 pixels :

  body{width:90%;margin:auto;min-width:600px;max-width:2000px}

Autres

Quelques liens pour le min-width et compagnie sous IE :

• http://forum.alsacreations.com/topic-4-17726-1-Maxwidh-sous-IE.html
• http://www.eklesia.net/spip.php?article115