Création d'un modèle de largeur fixe avec CSS
Cet article a paru dans la conception - Convivialité newsletter Tactics. Cliquez ici pour vous abonner automatiquement.
Plusieurs de mes colonnes récentes ont porté sur divers aspects de l'exécution page deux ou trois colonnes mises en page avec XHTML et CSS. Jusqu'à présent, tous les exemples ont été mises en page liquides (à savoir les dispositions qui seront automatiquement décompressés et contrat pour tenir dans la largeur de la fenêtre du navigateur). Maintenant, il est temps de considérer l'autre approche importante de la mise en page: la mise en page à largeur fixe.
De nombreux constructeurs de Web préfèrent utiliser la mise en page à largeur fixe pour la conception de page, car ils produisent des résultats précis et prévisibles. Cette approche imite étroitement la mise en page d'impression, ce qui est un facteur de confort important pour les concepteurs et les visiteurs; il est aussi la meilleure façon de gérer le contenu qui comprend beaucoup de grandes images et d'autres éléments qui ne coulent pas bien dans une disposition liquide.
Pendant des années, les concepteurs créeraient mises en page à largeur fixe avec des tables. Les colonnes de la table et les lignes sont un analogue passable de la grille de mise en page du concepteur, il est donc pas surprenant que les concepteurs adaptés tables HTML pour une utilisation dans la mise en page.
Cependant, mises en page basées sur des tables ont des problèmes importants. Outre le fait qu'il est sémantiquement incorrect d'utiliser des tables pour la mise en page, le code résultant est en désordre, difficile à lire, et encore plus difficile à maintenir, surtout quand il comprend des cellules fusionnées de table et les tables imbriquées.
En utilisant divs pour la mise en page fonctionne beaucoup mieux. En plus de la bonté karmique de suivre les meilleures pratiques recommandées, les charges de code plus rapide et plus maigre est plus facile de travailler avec.
Les attributs de formatage des tables et des cellules de table se prêtent à des mises en page à largeur fixe en le rendant assez facile de spécifier les dimensions de ces éléments. Mais vous pouvez accomplir la même chose avec divs en donnant les dimensions exactes divs et en utilisant le positionnement absolu et par rapport à placer ces divs sur la page.
La figure A montre un schéma de largeur fixe typique constitué d'un en-tête dans la partie supérieure, une zone de contenu à trois colonnes (une colonne page principale flanquée de deux barres latérales), et un pied en bas de la page. Tous les éléments sont des largeurs fixes; ils ne sont pas redimensionnés avec des changements dans la fenêtre du navigateur.
Voici le code CSS que les styles de la page en tant que mise en page à largeur fixe.
Le style div # tête définit une hauteur explicite et la largeur de la div d'en-tête. L'en-tête est explicitement positionné avec la position: absolute. top: 0px. et à gauche: 0px règles, quelle position il dans le coin supérieur gauche de la page. La position: règle absolue est importante, car les attributs de positionnement (en haut, à gauche, à droite, en bas) sont ignorés pour les éléments avec un positionnement normal (statique). Cependant, rappelez-vous que tous les éléments en position absolue sont retirés du flux normal des pages et des éléments qui font partie du flux seront positionnés sur la page comme si les éléments en position absolue n'existait pas.
Le div style # colonnes formate la div qui sert de conteneur pour les trois colonnes. Il utilise position: relative pour créer un élément qui fait partie du flux de page normale (il peut dilater et se contracter avec son contenu et d'influencer le positionnement des autres éléments), mais il peut être décalé par rapport à sa position normale. Le top: 100px règle fournit le décalage qui pousse le conteneur colonnes vers le bas pour l'empêcher de se chevauchant l'en-tête.
Les styles de règle div # de la première colonne de barre latérale. Il définit la largeur de la colonne (largeur: 150px) et utilise le positionnement absolu de placer la colonne dans le coin supérieur gauche de son élément parent. L'élément parent est la div de la colonne, ce qui explique le haut: règle 0px au lieu du paramètre 100px que vous pourriez attendre si l'élément a été positionné par rapport à l'élément du corps. La règle div # side2 de fait la même chose pour la colonne de droite de la barre latérale. Les seules différences sont la couleur de fond et la gauche: règle 600px, qui positionne la colonne à droite des deux autres colonnes.
Le style de la colonne de contenu principal dans le style de contenu div # est similaire aux deux autres colonnes. Il définit une largeur explicite (largeur: 450px) et utilise la gauche: 150px et top: 0px règles pour positionner la colonne à l'intérieur de son élément parent (les colonnes div). La principale différence est la position: règle relative. Vous utilisez le positionnement relatif de sorte que la colonne contenu principal peut influencer la taille de son élément parent (les colonnes div) et donc l'élément de pied de page.
Cette technique fonctionne parce que tous les schémas sont divs positionnés par rapport à leurs éléments parents. Dans la figure A, l'élément parent pour la tête, les colonnes et divs pied est la balise body, mais dans la figure B, c'est la div wrapper. Cette technique de centrage est expliquée plus en détail dans « Création d'une mise en page centrée avec CSS. »