174
Maîtrise des CSS
Ces.techniques.peuvent.être.utilisées.pour.transformer.la.précédente.mise.en.page.à.largeur.
fixe.sur.trois.colonnes.en.une.mise.en.page.fluide.à.trois.colonnes..Commençons.par.définir.
la.largeur.du.conteneur.sous.la.forme.d’un.pourcentage.de.la.largeur.totale.de.la.fenêtre..
La.plupart.des.utilisateurs.choisissent.une.taille.arbitraire.calculée.en.fonction.de.l’apparence.qui.leur.convient.à.l’écran,.et.c’est.bien.ainsi..Mais.si.vous.souhaitez.être.plus.précis,.
examinez.vos.statistiques.de.navigateur.pour.calculer.la.taille.de.fenêtre.la.plus.courante.
et.choisissez.un.pourcentage.de.conteneur.qui.correspond.à.ce.que.la.largeur.fixe.donnerait.à.cette.taille..Liquid.Fold.(http://liquidfold.net/).est.un.excellent.outil.pour.cela..Par.
exemple,.si.votre.graphiste.a.utilisé.une.largeur.de.960 pixels.et.que.la.fenêtre.de.navigateur.
de. la. majorité. de. vos. utilisateurs. est. définie. à. 1 250 pixels,. le. pourcentage. à. utiliser. est.
(960/1 250) × 100 = 76,8 %.
Ensuite,.fixez.la.largeur.des.zones.de.contenu.principale.et.secondaire.sous.la.forme.d’un.
pourcentage.de.la.largeur.du.conteneur..Dans.l’exemple.précédent,.la.largeur.de.la.div.de.
respond.à.72,82 %..De.la.même.manière,.la.largeur.de.la.div.de.contenu.secondaire.correspond.à.25 %.précisément..Ce.qui.laisse.2,18 %.de.gouttière.virtuelle.entre.la.navigation.et.le.
conteneur.pour.intégrer.les.erreurs.d’arrondi.et.les.irrégularités.susceptibles.de.se.produire :
.wrapper {
width: 76.8%;
margin: 0 auto;
text-align: left;
}
.content .primary {
width: 72.82%;
float: right;
display: inline;
}
.content .secondary {
width: 25%;
float: left;
display: inline;
}
Vous.devez.ensuite.définir.les.largeurs.des.colonnes.à.l’intérieur.de.la.zone.de.contenu.principale..Là,.les.choses.se.compliquent.un.peu,.car.les.largeurs.des.div.de.contenu.dépendent.
de.la.largeur.de.l’élément.de.contenu.principal.et.non.du.conteneur.global..Cette.fois,.la.
largeur.de.la.div.principale.est.de.400 pixels,.ce.qui.correspond.à.59,7 %.de.l’élément.parent..
De.la.même.manière,.la.largeur.de.la.div.secondaire.correspond.à.34,33 %.de.l’élément.
parent..Pour.finir,.il.faut.encore.une.gouttière.de.20 pixels,.ce.qui.correspond.à.2,63 %.de.
l’élément.parent.
.content .primary .primary {
width: 59.7%;
float: left;
display: inline;
}
.content .primary .secondary {
Maîtrise des CSS
Ces.techniques.peuvent.être.utilisées.pour.transformer.la.précédente.mise.en.page.à.largeur.
fixe.sur.trois.colonnes.en.une.mise.en.page.fluide.à.trois.colonnes..Commençons.par.définir.
la.largeur.du.conteneur.sous.la.forme.d’un.pourcentage.de.la.largeur.totale.de.la.fenêtre..
La.plupart.des.utilisateurs.choisissent.une.taille.arbitraire.calculée.en.fonction.de.l’apparence.qui.leur.convient.à.l’écran,.et.c’est.bien.ainsi..Mais.si.vous.souhaitez.être.plus.précis,.
examinez.vos.statistiques.de.navigateur.pour.calculer.la.taille.de.fenêtre.la.plus.courante.
et.choisissez.un.pourcentage.de.conteneur.qui.correspond.à.ce.que.la.largeur.fixe.donnerait.à.cette.taille..Liquid.Fold.(http://liquidfold.net/).est.un.excellent.outil.pour.cela..Par.
exemple,.si.votre.graphiste.a.utilisé.une.largeur.de.960 pixels.et.que.la.fenêtre.de.navigateur.
de. la. majorité. de. vos. utilisateurs. est. définie. à. 1 250 pixels,. le. pourcentage. à. utiliser. est.
(960/1 250) × 100 = 76,8 %.
Ensuite,.fixez.la.largeur.des.zones.de.contenu.principale.et.secondaire.sous.la.forme.d’un.
pourcentage.de.la.largeur.du.conteneur..Dans.l’exemple.précédent,.la.largeur.de.la.div.de.
respond.à.72,82 %..De.la.même.manière,.la.largeur.de.la.div.de.contenu.secondaire.correspond.à.25 %.précisément..Ce.qui.laisse.2,18 %.de.gouttière.virtuelle.entre.la.navigation.et.le.
conteneur.pour.intégrer.les.erreurs.d’arrondi.et.les.irrégularités.susceptibles.de.se.produire :
.wrapper {
width: 76.8%;
margin: 0 auto;
text-align: left;
}
.content .primary {
width: 72.82%;
float: right;
display: inline;
}
.content .secondary {
width: 25%;
float: left;
display: inline;
}
Vous.devez.ensuite.définir.les.largeurs.des.colonnes.à.l’intérieur.de.la.zone.de.contenu.principale..Là,.les.choses.se.compliquent.un.peu,.car.les.largeurs.des.div.de.contenu.dépendent.
de.la.largeur.de.l’élément.de.contenu.principal.et.non.du.conteneur.global..Cette.fois,.la.
largeur.de.la.div.principale.est.de.400 pixels,.ce.qui.correspond.à.59,7 %.de.l’élément.parent..
De.la.même.manière,.la.largeur.de.la.div.secondaire.correspond.à.34,33 %.de.l’élément.
parent..Pour.finir,.il.faut.encore.une.gouttière.de.20 pixels,.ce.qui.correspond.à.2,63 %.de.
l’élément.parent.
.content .primary .primary {
width: 59.7%;
float: left;
display: inline;
}
.content .primary .secondary {