Comment créer une disposition flottante à largeur fixe pour la programmation HTML5 et CSS3 - pour les nuls

Les mises en page fluides sont formidables, elles sont très flexibles et ne sont pas difficiles à construire en HTML5 et CSS3 Cependant, il est parfois agréable d'utiliser une mise en page à largeur fixe, en particulier si vous souhaitez que votre mise en page soit conforme à une image d'arrière-plan particulière.

L'attribut principal d'une mise en page à largeur fixe est l'utilisation d'une mesure fixe. (presque toujours des pixels), plutôt que le pourcentage de mesures utilisé dans une mise en page fluide.

Comment configurer le code HTML

Comme d'habitude, le code HTML est minimal. contient quelques divs nommés.

fixedWidth. html

Disposition de largeur fixe

Colonne de gauche

Colonne de droite
Pied de page

Fixer la largeur CSS

Une fois le code HTML configuré, vous pouvez utiliser CSS pour appliquer le schéma à deux colonnes

Voici le code CSS:

#header {background-color: # e2e393; border-bottom: 3px solid noir; text-align: center; largeur: 800px; padding-top: 1em;} # left {float: à gauche; largeur: 200px; clair: gauche; bordure-droite: 1px noir uni; hauteur: 30em; débordement: auto; rembourrage-droit:. 5em;} #right {float: à gauche; largeur: 570px; hauteur: 30em; débordement: auto; rembourrage-gauche:. 5em;} #footer {largeur: 800px; text-align: centre; couleur de fond: # e2e393; border-top: 3px double noir; effacer: les deux;}

Tout est plutôt simple:

1. Colore chaque élément pour voir ce qui se passe.

   Commencez par donner à chaque div une couleur de fond différente afin que vous puissiez voir ce qui se passe.

2. Déterminer la largeur globale de la mise en page.

   Choisissez une largeur cible pour l'ensemble de la mise en page. 800 pixels ont été choisis parce que c'est une largeur raisonnablement standard.

3. Ajustez la largeur des éléments de la page.

   Il est souvent plus facile de commencer avec des éléments tels que l'en-tête et le pied de page qui occupent souvent toute la largeur du motif.

4. Flottez les colonnes.

   Flotter chaque colonne vers la gauche.

5. Définissez les largeurs de colonne.

   Commencez par faire en sorte que la largeur des colonnes soit égale à la largeur de la conception entière. Plus tard, vous ajusterez un peu les marges et les bordures.

6. Effacer la colonne de gauche.

   Assurez-vous que la règle d'effacement: gauche est appliquée dans la colonne de gauche.

7. Définir les hauteurs de colonne.

   Donnez à chaque colonne la même hauteur. Cela donne l'apparence correcte si vous ajoutez des bordures ou des couleurs d'arrière-plan aux colonnes.

8. Ajustez les bordures et le rembourrage.

   Utilisez les bordures, le remplissage et la marge pour ajuster votre page pour obtenir l'apparence souhaitée.

9. Réglez à nouveau les largeurs.

   L'ajout de bordures, de remplissage et de marge peut modifier la largeur des éléments existants.Après avoir modifié ces attributs, examinez attentivement votre mise en page pour vous assurer qu'elle n'a pas été endommagée et modifiez les différentes largeurs si nécessaire.