168
Maîtrise des CSS
les.mises.en.page.cousues.au.pixel.près.et.contraindre.les.colonnes.à.s’empiler.les.unes.sur.
les.autres.au.lieu.de.se.serrer.côte.à.côte..
ments.plus.que.celle.des.éléments.eux-mêmes..Dans.les.navigateurs.conformes.aux.standards,.si.le.contenu.d’un.élément.devient.trop.grand,.il.s’étend.tout.simplement.hors.de.la.
boîte..Sous.Internet.Explorer,.dans.un.tel.cas,.c’est.l’élément.tout.entier.qui.s’étend..Cet.
effet.indésirable.peut.être.provoqué.par.les.plus.infimes.détails,.comme.une.portion.de.texte.
en.italique..Quand.ce.problème.survient.dans.une.mise.en.page.ciselée.au.millimètre,.il.ne.
reste.plus.d’espace.pour.que.les.éléments.restent.côte.à.côte.et.l’un.d’entre.eux.finit.par.disparaître.en.dessous..D’autres.bogues.d’Internet.Explorer,.comme.celui.du.décalage.de.texte.
de.3 pixels.et.celui.de.la.double.marge.des.éléments.flottants.(voir.le.Chapitre 9),.ainsi.que.
différentes.erreurs.d’arrondi.des.navigateurs.peuvent.provoquer.l’effondrement.des.mises.
en.page.flottantes..
rieur.de.leurs.éléments.conteneurs..Au.lieu.d’utiliser.des.marges.et.des.remplissages.horizontaux.pour.créer.des.gouttières,.créez.une.gouttière.virtuelle.en.faisant.flotter.un.élément.à.
gauche.et.un.autre.à.droite.(voir.Figure 8.6)..Si.la.taille.d’un.élément.augmentait.accidentellement.de.quelques.pixels,.il.grignoterait.un.bout.de.la.gouttière.virtuelle.au.lieu.de.manquer.
d’espace.et.de.glisser.sous.l’élément.précédent..
Figure 8.6
Une mise en page à
deux colonnes avec
des éléments flottants.
float: left
float: right
clear: both
#subNav
#content
#footer
#wrapper
Gouttière virtuelle
Le.code.CSS.pour.cette.mise.en.page.est.très.simple..Vous.devez.fixer.la.largeur.désirée.de.
chaque.colonne.puis.faire.flotter.le.contenu.secondaire.à.gauche.et.le.contenu.principal.à.
droite..Vous.devez.aussi.ajouter.un.léger.remplissage.au.contenu.principal.afin.d’empêcher.
que. le. texte. enclos. vienne. toucher. le. bord. droit. de. l’élément..Vous. remarquerez. que. j’ai.
aussi.ajouté.display:inline.à.tous.les.éléments.flottants..Il.s’agit.d’une.mesure.défensive.
contre.le.bogue.de.la.double.marge.des.éléments.flottants.d’Internet.Explorer.(nous.reviendrons.sur.ce.point.au.chapitre.suivant).
Maîtrise des CSS
les.mises.en.page.cousues.au.pixel.près.et.contraindre.les.colonnes.à.s’empiler.les.unes.sur.
les.autres.au.lieu.de.se.serrer.côte.à.côte..
ments.plus.que.celle.des.éléments.eux-mêmes..Dans.les.navigateurs.conformes.aux.standards,.si.le.contenu.d’un.élément.devient.trop.grand,.il.s’étend.tout.simplement.hors.de.la.
boîte..Sous.Internet.Explorer,.dans.un.tel.cas,.c’est.l’élément.tout.entier.qui.s’étend..Cet.
effet.indésirable.peut.être.provoqué.par.les.plus.infimes.détails,.comme.une.portion.de.texte.
en.italique..Quand.ce.problème.survient.dans.une.mise.en.page.ciselée.au.millimètre,.il.ne.
reste.plus.d’espace.pour.que.les.éléments.restent.côte.à.côte.et.l’un.d’entre.eux.finit.par.disparaître.en.dessous..D’autres.bogues.d’Internet.Explorer,.comme.celui.du.décalage.de.texte.
de.3 pixels.et.celui.de.la.double.marge.des.éléments.flottants.(voir.le.Chapitre 9),.ainsi.que.
différentes.erreurs.d’arrondi.des.navigateurs.peuvent.provoquer.l’effondrement.des.mises.
en.page.flottantes..
rieur.de.leurs.éléments.conteneurs..Au.lieu.d’utiliser.des.marges.et.des.remplissages.horizontaux.pour.créer.des.gouttières,.créez.une.gouttière.virtuelle.en.faisant.flotter.un.élément.à.
gauche.et.un.autre.à.droite.(voir.Figure 8.6)..Si.la.taille.d’un.élément.augmentait.accidentellement.de.quelques.pixels,.il.grignoterait.un.bout.de.la.gouttière.virtuelle.au.lieu.de.manquer.
d’espace.et.de.glisser.sous.l’élément.précédent..
Figure 8.6
Une mise en page à
deux colonnes avec
des éléments flottants.
float: left
float: right
clear: both
#subNav
#content
#footer
#wrapper
Gouttière virtuelle
Le.code.CSS.pour.cette.mise.en.page.est.très.simple..Vous.devez.fixer.la.largeur.désirée.de.
chaque.colonne.puis.faire.flotter.le.contenu.secondaire.à.gauche.et.le.contenu.principal.à.
droite..Vous.devez.aussi.ajouter.un.léger.remplissage.au.contenu.principal.afin.d’empêcher.
que. le. texte. enclos. vienne. toucher. le. bord. droit. de. l’élément..Vous. remarquerez. que. j’ai.
aussi.ajouté.display:inline.à.tous.les.éléments.flottants..Il.s’agit.d’une.mesure.défensive.
contre.le.bogue.de.la.double.marge.des.éléments.flottants.d’Internet.Explorer.(nous.reviendrons.sur.ce.point.au.chapitre.suivant).