183
Mise en page
.wrapper {
background: #fff url(/img/secondary-faux-column.gif) repeat-y 25% 0;
}
Vous.pouvez.créer.l’arrière-plan.pour.la.zone.de.contenu.principale.à.l’aide.d’une.méthode.
similaire.. Le. bord. gauche. de. cette. colonne. factice. doit. commencer. à. 72,82 %. du. bord.
gauche.de.l’image.pour.se.caler.sur.la.position.de.l’élément.de.contenu.principal.par.rapport.au.conteneur..Comme.l’élément.conteneur.possède.déjà.une.image.d’arrière-plan,.vous.
devez.ajouter.un.second.élément.conteneur.à.l’intérieur.du.premier..Vous.pouvez.ensuite.
appliquer.la.seconde.image.d’arrière-plan.de.colonne.factice.à.ce.nouvel.élément.conteneur.
.inner-wrapper {
background: url(/img/primary-faux-column.gif) repeat-y 72.82% 0;
}
Si. vous. avez. bien. calculé. les. proportions,. vous. devriez. ainsi. obtenir. une. magnifique.
mise.en.page.liquide.à.trois.colonnes.qui.s’étire.sur.toute.la.hauteur.du.conteneur.(voir.
Figure 8.18).
Figure 8.18
Mise en page à trois colonnes factices.
Colonnes de hauteurs égales
En.plus.des.colonnes.que.vous.créerez.pour.la.mise.en.page.principale,.vous.pouvez.créer.
des.colonnes.de.hauteurs.égales.à.d’autres.endroits.(voir.Figure 8.19)..Si.le.résultat.est.facile.
à.obtenir.avec.des.tableaux,.il.est.plus.difficile.à.réaliser.en.CSS..
Mise en page
.wrapper {
background: #fff url(/img/secondary-faux-column.gif) repeat-y 25% 0;
}
Vous.pouvez.créer.l’arrière-plan.pour.la.zone.de.contenu.principale.à.l’aide.d’une.méthode.
similaire.. Le. bord. gauche. de. cette. colonne. factice. doit. commencer. à. 72,82 %. du. bord.
gauche.de.l’image.pour.se.caler.sur.la.position.de.l’élément.de.contenu.principal.par.rapport.au.conteneur..Comme.l’élément.conteneur.possède.déjà.une.image.d’arrière-plan,.vous.
devez.ajouter.un.second.élément.conteneur.à.l’intérieur.du.premier..Vous.pouvez.ensuite.
appliquer.la.seconde.image.d’arrière-plan.de.colonne.factice.à.ce.nouvel.élément.conteneur.
.inner-wrapper {
background: url(/img/primary-faux-column.gif) repeat-y 72.82% 0;
}
Si. vous. avez. bien. calculé. les. proportions,. vous. devriez. ainsi. obtenir. une. magnifique.
mise.en.page.liquide.à.trois.colonnes.qui.s’étire.sur.toute.la.hauteur.du.conteneur.(voir.
Figure 8.18).
Figure 8.18
Mise en page à trois colonnes factices.
Colonnes de hauteurs égales
En.plus.des.colonnes.que.vous.créerez.pour.la.mise.en.page.principale,.vous.pouvez.créer.
des.colonnes.de.hauteurs.égales.à.d’autres.endroits.(voir.Figure 8.19)..Si.le.résultat.est.facile.
à.obtenir.avec.des.tableaux,.il.est.plus.difficile.à.réaliser.en.CSS..
