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

Dernière mise à jour le 13 novembre 2009 à 17:31 par marlalapocket
Publié par Ssylvainsab
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 :
Meilleures réponses pour « Adapter un site à toutes les résolutions, le centrer » dans :
Choisir une image et savoir l’optimiser pour son site pro VoirChoisir une image et savoir l’optimiser pour son site professionnel Pour rendre un affichage optimal des images de votre site Internet professionnel, le choix du format doit être impérativement réalisé en fonction de son utilisation. Choisir...
[Matériel] Ecran noir ou mise en veille au démarrage VoirSi l'écran est noir dès le démarrage de l'ordinateur 1. Le PC émet un seul bip court 2. Le PC émet plusieurs bips 3. Le PC n'émet aucun bip Si l'écran est noir au chargement de Windows Si l'écran est noir lors du lancement d'une application...
Désactiver le Centre de sécurité de Windows XP VoirPréambule Avec le Service Pack 2 (SP2) de Windows XP, est apparu un nouvel outil : le Centre de sécurité. Ce dernier est maintenant présent dans les systèmes d'exploitation Windows XP et Windows Vista. Le SP2 est axé sur l'amélioration de la...
Télécharger Realtek Wireless drivers pour XP (RTL8187) VoirRealtek RTL8187 Wireless 802.11g 54Mbps USB 2.0 Network Adapter SITECOM WL-168 Wireless Network USB Adapter 54g SURECOM EP-9001-g 802.11g 54M WLAN USB Adapter
Mesure d'audience d'un site web VoirMesure et qualification de l'audience d'un site web L'objectif de tout webmaster est de développer l'audience de son site web, c'est-à-dire d'accroître le nombre de visites journalières. Il lui est ainsi indispensable de disposer d'indicateurs lui...