52
Maîtrise des CSS
Le.positionnement.absolu.peut.être.utile.à.la.structuration.des.pages,.notamment.s’il.s’opère.
avec.des.ancêtres.positionnés.de.manière.relative..Il.est.parfaitement.possible.de.créer.une.
structure.de.page.en.n’utilisant.que.des.positionnements.absolus..Pour.que.cela.fonctionne,.
il.faut.que.ces.éléments.aient.des.dimensions.fixes,.afin.qu’on.puisse.les.positionner.où.on.
le.souhaite.sans.qu’ils.se.chevauchent..
lue.n’ont.pas.d’effet.sur.les.boîtes.dans.le.flux.normal..Si.vous.agrandissez.une.boîte.positionnée.de.manière.absolue.(par.exemple,.en.augmentant.la.taille.des.polices),.les.boîtes.
situées.autour.ne.se.réorganisent.pas.pour.en.tenir.compte..La.moindre.modification.de.taille.
peut.ainsi.détruire.les.subtiles.proportions.de.vos.maquettes.en.provoquant.le.chevauchement.des.boîtes.positionnées.de.manière.absolue.
Positionnement fixe
Le.positionnement.fixe.est.une.sous-catégorie.du.positionnement.absolu..La.seule.différence.
est.que,.dans.ce.cas,.le.bloc.conteneur.de.l’élément.fixe.n’est.autre.que.la.fenêtre.d’affichage.
elle-même..Le.positionnement.fixe.permet.ainsi.de.créer.des.éléments.flottants.qui.restent.
toujours.au.même.endroit.dans.la.fenêtre..L’ancien.site.web.snook.ca.(voir.Figure 3.12).
en. propose. un. exemple.. Le. formulaire. pour. les. commentaires. est. positionné. de. manière.
fixe.afin.de.rester.ancré.au.même.endroit.dans.l’écran.quand.la.page.défile..Cette.astuce.
améliore.l’utilisabilité.du.site,.et.évite.à.l’utilisateur.de.faire.défiler.la.page.pour.laisser.son.
commentaire.
Figure 3.12
Dans l’ancien site web snook.ca, le formulaire pour les commentaires situé dans la marge à droite de
l’écran utilisait une position fixe pour rester au même endroit dans la fenêtre d’affichage
Malheureusement,.Internet.Explorer 6.et.ses.versions.antérieures.ne.prennent.pas.en.charge.
le.positionnement.fixe..Internet.Explorer 7.le.reconnaît.partiellement,.mais.avec.quelques.
bogues.en.pratique..Pour.contourner.ces.problèmes,.Jonathan.Snook.a.ici.utilisé.du.code.
JavaScript.pour.répliquer.l’effet.dans.Internet.Explorer..
Flottement
Le.dernier.modèle.de.mise.en.forme.visuelle.est.le.modèle.de.flottement..Une.boîte.flottante.
peut.être.calée.à.gauche.ou.à.droite,.de.manière.que.son.bord.externe.touche.le.bord.de.sa.
Maîtrise des CSS
Le.positionnement.absolu.peut.être.utile.à.la.structuration.des.pages,.notamment.s’il.s’opère.
avec.des.ancêtres.positionnés.de.manière.relative..Il.est.parfaitement.possible.de.créer.une.
structure.de.page.en.n’utilisant.que.des.positionnements.absolus..Pour.que.cela.fonctionne,.
il.faut.que.ces.éléments.aient.des.dimensions.fixes,.afin.qu’on.puisse.les.positionner.où.on.
le.souhaite.sans.qu’ils.se.chevauchent..
lue.n’ont.pas.d’effet.sur.les.boîtes.dans.le.flux.normal..Si.vous.agrandissez.une.boîte.positionnée.de.manière.absolue.(par.exemple,.en.augmentant.la.taille.des.polices),.les.boîtes.
situées.autour.ne.se.réorganisent.pas.pour.en.tenir.compte..La.moindre.modification.de.taille.
peut.ainsi.détruire.les.subtiles.proportions.de.vos.maquettes.en.provoquant.le.chevauchement.des.boîtes.positionnées.de.manière.absolue.
Positionnement fixe
Le.positionnement.fixe.est.une.sous-catégorie.du.positionnement.absolu..La.seule.différence.
est.que,.dans.ce.cas,.le.bloc.conteneur.de.l’élément.fixe.n’est.autre.que.la.fenêtre.d’affichage.
elle-même..Le.positionnement.fixe.permet.ainsi.de.créer.des.éléments.flottants.qui.restent.
toujours.au.même.endroit.dans.la.fenêtre..L’ancien.site.web.snook.ca.(voir.Figure 3.12).
en. propose. un. exemple.. Le. formulaire. pour. les. commentaires. est. positionné. de. manière.
fixe.afin.de.rester.ancré.au.même.endroit.dans.l’écran.quand.la.page.défile..Cette.astuce.
améliore.l’utilisabilité.du.site,.et.évite.à.l’utilisateur.de.faire.défiler.la.page.pour.laisser.son.
commentaire.
Figure 3.12
Dans l’ancien site web snook.ca, le formulaire pour les commentaires situé dans la marge à droite de
l’écran utilisait une position fixe pour rester au même endroit dans la fenêtre d’affichage
Malheureusement,.Internet.Explorer 6.et.ses.versions.antérieures.ne.prennent.pas.en.charge.
le.positionnement.fixe..Internet.Explorer 7.le.reconnaît.partiellement,.mais.avec.quelques.
bogues.en.pratique..Pour.contourner.ces.problèmes,.Jonathan.Snook.a.ici.utilisé.du.code.
JavaScript.pour.répliquer.l’effet.dans.Internet.Explorer..
Flottement
Le.dernier.modèle.de.mise.en.forme.visuelle.est.le.modèle.de.flottement..Une.boîte.flottante.
peut.être.calée.à.gauche.ou.à.droite,.de.manière.que.son.bord.externe.touche.le.bord.de.sa.