Comment utiliser les dispositions en trois colonnes dans CSS3 - Mannequins

Les mises en page trois colonnes en CSS3 sont couramment utilisées sur les sites qui fournissent une liste de génériques. des liens d'un côté de la page, du contenu au milieu et des liens publicitaires ou spécifiques à une page de l'autre côté.

Les pages de disposition de Dynamic Drive affichent une utilisation de cette mise en page où vous voyez une liste d'offres dans le volet de gauche, les dispositions réelles dans le volet de contenu et une liste de sponsors dans le volet de droite.

Il y a des variations sur ce thème. Un exemple apparaît sur le site Electronic Frontier Foundation où vous voyez des liens de site dans le volet de gauche, des informations sur EFF dans le volet de contenu et des liens de nouvelles dans le volet de droite.

Vous pouvez voir une liste des trois mises en page de la bibliothèque CSS. Comme pour les dispositions à deux colonnes, vous trouverez un mélange de dispositions fixes et fluides lorsque vous travaillez avec les dispositions à trois colonnes.

Bien sûr, il y a plus de types de mises en page à trois colonnes que de mises en page à deux colonnes parce que plus de permutations sont possibles. Dans certaines dispositions, l'une des colonnes latérales est fluide, tout comme la colonne de contenu. Il y a même une mise en page où les trois colonnes sont fluides, ce qui signifie que l'ensemble de la mise en page se redimensionnera pour correspondre à la taille actuelle de la fenêtre du navigateur.

Le seul type de disposition à trois colonnes manquant sur ce site est celui dans lequel les deux colonnes sont alignées, l'une sur l'autre. Ce formulaire est couramment utilisé pour la documentation en ligne, telle que l'API Java 7.

Un moyen de contourner ce problème consiste à utiliser un autre produit, tel que le plug-in UI Layout pour jQuery. Une autre alternative consiste à modifier la mise en page fixe CSS # 3. 3- (Disposition fixe-fixe-fixe).

Vous n'avez pas besoin de modifier la partie HTML de cet exemple. La version HTML5 de la mise en page ressemble à ceci. (Vous pouvez trouver le code complet pour cet exemple dans le dossier Chapitre 07 du code téléchargeable comme ThreeColumnHelpLayout.HTML.)

CSS Fixed Layout # 3. 3- (Fixe-Fixe-Fixe)

CSS Fixed Layout # 3. 3- (Fixe-Fixe-Fixe)
Colonne de contenu: Fixe 
Colonne de gauche: 180px 
Droite Colonne: 190px 
Pied de page

Le CSS commence par le code fourni par le site. Afin de modifier ce code pour fournir le format requis pour la documentation d'aide, vous devez apporter quelques petites modifications. La procédure suivante vous indique comment.

1. Modifiez la propriété margin-left du style #rightcolumn en -840px.

   Cette modification rend les colonnes droite et gauche égales.

2. Changez la propriété width pour le style #rightcolumn en 180px.

   Cette modification rend les colonnes droite et gauche égales en largeur.

3. Ajoutez une valeur de propriété height de 250 pixels aux styles #leftcolumn et #rightcolumn.

   Cette modification permet aux deux colonnes d'utiliser la moitié de l'espace disponible pour le contenu.

4. Ajoutez une valeur de propriété margin-top de 250px au style #rightcolumn.

   Cette modification positionne la colonne de droite sous la colonne de gauche.

5. Chargez la page résultante dans votre navigateur.

   Vous voyez une disposition en trois colonnes comme celle-ci:

   

Les modèles Dynamic Drive sont flexibles et peuvent souvent servir à d'autres fins avec quelques petites modifications. L'important est de commencer avec une mise en page qui ressemble à ce que vous voulez utiliser.