178
Maîtrise des CSS
Figure 8.12
La mise en page élastique une fois la taille du texte augmentée de plusieurs crans.
Alors.que.presque.tous.les.navigateurs.modernes.proposent.des.outils.de.zoom,.on.peut.se.
demander.si.les.mises.en.page.élastiques.avaient.encore.le.moindre.intérêt..Oui,.tant.que.
tous.les.navigateurs.ne.proposeront.pas.cette.fonctionnalité,.il.sera.intéressant.de.développer.
des.mises.en.page.élastiques.pour.les.navigateurs.plus.anciens..
Images liquides et élastiques
Dans.une.mise.en.page.liquide.ou.élastique,.vous.constaterez.peut-être.que.les.images.à.largeur.fixe.ont.un.effet.dévastateur.sur.la.structure.des.pages..Lorsque.la.largeur.de.la.mise.en.
page.est.réduite,.les.images.se.déplacent.en.fonction.et.peuvent.interférer.les.unes.avec.les.
autres..Certaines.créent.des.largeurs.minimales.naturelles,.qui.empêchent.des.éléments.de.
diminuer.de.taille..D’autres.sortent.de.leurs.éléments.conteneurs.et.chamboulent.des.mises.
en.page.pourtant.ajustées.au.millimètre.
L’augmentation.de.la.largeur.de.la.mise.en.page.peut.avoir.des.conséquences.dramatiques.
en.créant.des.interstices.indésirables.et.en.déséquilibrant.les.proportions..Pas.de.panique :.il.
existe.quelques.moyens.d’éviter.ces.problèmes.
Pour.les.images.qui.doivent.couvrir.une.grande.zone,.comme.celles.que.l’on.trouve.dans.
les.en-têtes.des.sites.ou.les.logos,.envisagez.d’utiliser.une.image.d’arrière-plan.plutôt.qu’un.
élément.img..Ainsi,. lorsque. l’élément. est. mis. à. l’échelle,. c’est. une. partie. plus. ou. moins.
importante.de.l’image.d’arrière-plan.qui.se.révèle :
#branding {
height: 171px;
background: url(/img/branding.png) no-repeat left top;
}