Design-Tuto - Pour tous les webmaster ! - Adaptation design a des resolutions

Adapter le design à différent résolution d'écrans et fixer la largeur minimum et maximum d’une page sous Firefox et Internet Explorer

1.La mise en page fluide:

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 :

Code:

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.)

-------------------------------------------------------------------------------------------------------

Mais, sans limite supérieure, les pages peuvent s’étirer de manière excessive et perdront en lisibilité. De même, sans limite inférieure, ces pages "fluides" peuvent "s’écraser" et perdre en cohérence

Par exemple:
* Une page d’une largeur de l’ordre de 750 pixels, conçue pour être affichée sur des écrans 800x600, peut sembler perdue au milieu d’un écran de portable dont la largeur atteint 1280 pixels voire plus.
* Des pages prévues pour une définition de 1024x768 (ayant, par exemple, une largeur de l’ordre de 1000 pixels) sont inconfortables à lire sur des écrans 800x600 encore nombreux, l’internaute n’ayant qu’une vue partielle du contenu présenté.

Face à ce constat la solution et:

* une mise en page fluide,
* une limite inférieure exprimée en pixels (par exemple 740px),
* une limite supérieure également exprimée en pixels (par exemple 950px),
* centrer le contenu lorsque la largeur de la fenêtre du navigateur dépasse la limite supérieure fixée.

Et adapter le tout pour IE (Internet Explorer ne reconnaît pas les propriétés CSS min-width et max-width) et Firefox .

Récapitulatif du code :

Code: