182
Maîtrise des CSS
lorsque.la.fenêtre.du.navigateur.est.redimensionnée..L’astuce.consiste.alors.à.utiliser.des.
pourcentages.pour.positionner.l’image.d’arrière-plan.
Si.vous.définissez.une.position.d’arrière-plan.à.l’aide.de.pixels,.le.coin.supérieur.gauche.
de.l’image.est.positionné.par.rapport.au.coin.supérieur.gauche.de.l’élément.et.décalé.du.
nombre. de. pixels. spécifié..Avec. le. positionnement. en. pourcentage,. c’est. le. point. correspondant.dans.l’image.qui.est.positionné..Ainsi,.si.vous.définissez.une.position.verticale.et.
horizontale.de.20 %,.vous.positionnez.en.fait.un.point.qui.se.trouve.à.20 %.du.coin.supérieur.
gauche.de.l’image.et.vous.le.calez.à.20 %.du.coin.supérieur.gauche.de.l’élément.parent.(voir.
Figure 8.17).
20px
20 %
20px
20 %
(20 %, 20 %)
x
Positionnement de l’arrière-plan
en pixels
Positionnement de l’arrière-plan
en pourcentage
(0,0)
x
Figure 8.17
Lorsque le positionnement est spécifié en pourcentage, c’est la position correspondante de l’image qui est
utilisée.
Le.positionnement.des.images.en.pourcentage.peut.être.très.utile,.car.il.permet.de.créer.des.
images.d’arrière-plan.avec.les.mêmes.proportions.horizontales.que.la.mise.en.page,.puis.de.
les.positionner.là.où.vous.souhaitez.que.les.colonnes.apparaissent.
Pour.créer.une.colonne.factice.pour.la.zone.de.contenu.secondaire,.commencez.par.créer.
une.image.d’arrière-plan.très.large..Dans.cet.exemple,.j’ai.créé.une.image.de.4 000 pixels.
de.large.et.5 pixels.de.haut..Ensuite,.vous.devez.créer.une.zone.sur.l’image.d’arrière-. plan.
qui.agira.comme.une.fausse.colonne..La.zone.de.contenu.secondaire.a.été.fixée.à.25 %.de.la.
largeur.du.conteneur..Vous.devez.donc.créer.une.zone.correspondante.sur.l’image.d’arrièreplan,.qui.atteint.25 %.de.sa.largeur..Pour.une.image.d’arrière-plan.de.4 000 pixels.de.large,.
cela.représente.une.colonne.de.1 000 pixels.de.large..Exportez.cette.image.au.format.GIF,.en.
vous.assurant.que.la.zone.non.couverte.par.la.colonne.factice.est.transparente.
Le.bord.droit.de.la.colonne.factice.se.trouve.maintenant.à.25 %.du.côté.gauche.de.l’image..
Le. bord. droit. de. la. zone. de. contenu. secondaire. est. à. 25 %.du. bord. gauche. de. l’élément.
conteneur.. Cela. signifie. que,. si. vous. appliquez. l’image. comme. arrière-plan. à. l’élément.
conteneur.et.fixez.la.position.horizontale.à.25 %,.le.bord.droit.de.la.colonne.factice.s’aligne.
parfaitement.avec.le.bord.droit.de.l’élément.de.navigation.
Maîtrise des CSS
lorsque.la.fenêtre.du.navigateur.est.redimensionnée..L’astuce.consiste.alors.à.utiliser.des.
pourcentages.pour.positionner.l’image.d’arrière-plan.
Si.vous.définissez.une.position.d’arrière-plan.à.l’aide.de.pixels,.le.coin.supérieur.gauche.
de.l’image.est.positionné.par.rapport.au.coin.supérieur.gauche.de.l’élément.et.décalé.du.
nombre. de. pixels. spécifié..Avec. le. positionnement. en. pourcentage,. c’est. le. point. correspondant.dans.l’image.qui.est.positionné..Ainsi,.si.vous.définissez.une.position.verticale.et.
horizontale.de.20 %,.vous.positionnez.en.fait.un.point.qui.se.trouve.à.20 %.du.coin.supérieur.
gauche.de.l’image.et.vous.le.calez.à.20 %.du.coin.supérieur.gauche.de.l’élément.parent.(voir.
Figure 8.17).
20px
20 %
20px
20 %
(20 %, 20 %)
x
Positionnement de l’arrière-plan
en pixels
Positionnement de l’arrière-plan
en pourcentage
(0,0)
x
Figure 8.17
Lorsque le positionnement est spécifié en pourcentage, c’est la position correspondante de l’image qui est
utilisée.
Le.positionnement.des.images.en.pourcentage.peut.être.très.utile,.car.il.permet.de.créer.des.
images.d’arrière-plan.avec.les.mêmes.proportions.horizontales.que.la.mise.en.page,.puis.de.
les.positionner.là.où.vous.souhaitez.que.les.colonnes.apparaissent.
Pour.créer.une.colonne.factice.pour.la.zone.de.contenu.secondaire,.commencez.par.créer.
une.image.d’arrière-plan.très.large..Dans.cet.exemple,.j’ai.créé.une.image.de.4 000 pixels.
de.large.et.5 pixels.de.haut..Ensuite,.vous.devez.créer.une.zone.sur.l’image.d’arrière-. plan.
qui.agira.comme.une.fausse.colonne..La.zone.de.contenu.secondaire.a.été.fixée.à.25 %.de.la.
largeur.du.conteneur..Vous.devez.donc.créer.une.zone.correspondante.sur.l’image.d’arrièreplan,.qui.atteint.25 %.de.sa.largeur..Pour.une.image.d’arrière-plan.de.4 000 pixels.de.large,.
cela.représente.une.colonne.de.1 000 pixels.de.large..Exportez.cette.image.au.format.GIF,.en.
vous.assurant.que.la.zone.non.couverte.par.la.colonne.factice.est.transparente.
Le.bord.droit.de.la.colonne.factice.se.trouve.maintenant.à.25 %.du.côté.gauche.de.l’image..
Le. bord. droit. de. la. zone. de. contenu. secondaire. est. à. 25 %.du. bord. gauche. de. l’élément.
conteneur.. Cela. signifie. que,. si. vous. appliquez. l’image. comme. arrière-plan. à. l’élément.
conteneur.et.fixez.la.position.horizontale.à.25 %,.le.bord.droit.de.la.colonne.factice.s’aligne.
parfaitement.avec.le.bord.droit.de.l’élément.de.navigation.