Comment créer une mise en page flottante à largeur fixe centrée pour la programmation HTML5 et CSS3

Les mises en page à largeur fixe sont courantes, mais elles semblent un peu étranges si le navigateur n'a pas la largeur spécifiée dans le CSS3. Si le navigateur est trop étroit, la mise en page ne fonctionnera pas, et la deuxième colonne (généralement) descendra à la ligne suivante.

Si le navigateur est trop large, la page semble être écrasée sur la marge de gauche avec beaucoup d'espace blanc sur la droite.

La solution naturelle consiste à créer un motif de largeur fixe relativement étroit centré sur l'ensemble de la page.

Certains ont appelé ce type de design (flottant à largeur fixe centré dans le navigateur) une mise en page jello car ce n'est pas très fluide et pas tout à fait corrigé.

Faire un corps de substitution avec un div

Dans tous les cas, le HTML ne requiert qu'un seul élément, un div qui englobe tout le reste du corps:

fixedWidthCentered. html

Disposition centrée de la largeur fixe

Colonne de gauche

Colonne de droite
Pied de page

Le contenu de la page entière est maintenant encapsulé dans une div spéciale. Cette div sera redimensionnée à une largeur standard (typiquement 640 ou 800 pixels). L'élément tout sera centré dans le corps, et les autres éléments seront placés à l'intérieur comme s'il s'agissait du corps:

#all {width: 800px; hauteur: 600px; marge-gauche: auto; marge-droite: auto; bordure: 1px gris uni;} #header {background-color: # e2e393; bord inférieur: 3px noir uni; text-align: centre; largeur: 800px; hauteur: 100px; padding-top: 1em;} #left {float: à gauche; largeur: 200px; clair: gauche; bordure-droite: 1px noir uni; hauteur: 400px; rembourrage-droit:. 5em;} #right {float: à gauche; largeur: 580px; hauteur: 400px; rembourrage-gauche:. 5em;} #footer {largeur: 800px; hauteur: 60px; text-align: centre; couleur de fond: # e2e393; border-top: 3px double noir; rembourrage-fond: 1em; clear: both;}

Fonctionnement de la mise en page jello

Ce code est très similaire au style, mais il possède de nouvelles fonctionnalités importantes:

• L'élément all a une largeur fixe. La largeur de cet élément déterminera la largeur de la partie fixe de la page.

• tout nécessite également une hauteur fixe. Si vous ne spécifiez pas de hauteur, tous auront 0 pixels de haut car tous les éléments qui s'y trouvent sont flottants.

• Centre. Rappelez-vous que pour centrer les divs (ou tout autre élément de niveau bloc), vous définissez les options margin-left et margin-right sur auto.

• Do pas flotter tous . La marge: auto trick ne fonctionne pas sur les éléments flottants. tous ne devraient pas avoir d'attribut float.

• Assurez-vous que les largeurs intérieures atteignent la largeur de . Si tous ont une largeur de 800 pixels, assurez-vous que les largeurs, les bordures et les marges de tous les éléments à l'intérieur totalisent exactement 800 pixels. Si vous allez même un pixel plus, quelque chose va déborder et gâcher l'effet. Vous devrez peut-être jouer avec les largeurs pour que tout fonctionne.

• Ajustez les hauteurs: Si votre conception a une hauteur fixe, vous aurez également besoin de jouer avec les hauteurs pour que tout soit parfait. Les calculs vous rapprocheront, mais vous aurez généralement besoin de passer du temps de qualité avec les mesures exactes pour obtenir tout ce qu'il faut.

Limites de la mise en page de Jello

mises en page Jello représentent un compromis entre mises en page fixes et fluides, mais ils ne sont pas parfaits:

• largeur minimale implicite: navigateurs très étroits (comme les téléphones cellulaires) ne peuvent pas rendre la disposition comme vous le souhaitez. Heureusement, le contenu sera toujours visible, mais pas exactement dans le format que vous vouliez.

• Espace d'écran gaspillé: Si vous réduisez la partie rendue de la page, beaucoup d'espace n'est pas utilisé dans les navigateurs haute résolution. Cela peut être frustrant.

• Complexité: Bien que cette technique de mise en page est beaucoup plus simple que des mises en page des tables, il est encore un peu impliqué. Vous devez planifier vos divs pour que ce type de mise en page fonctionne.