Il est temps d’entrer dans le vif du sujet : le placement des objets d’un document web
en constitue souvent la charpente. Nous expliquerons par étapes les bases du positionnement CSS, pour lesquelles il est nécessaire de bien comprendre le « modèle de
boîte » normalisé par le W3C.
Introduction au positionnement en CSS
L’arrivée de CSS 2 a généralisé le recours aux feuilles de styles. Celles-ci proposent
des mises en page bien plus souples que les antiques méthodes à base de tableaux.
Contrairement aux cellules de ces derniers, nécessairement adjacentes, les éléments
HTML stylés en CSS peuvent facilement être placés n’importe où.
Signalons un autre avantage de taille : la notion de profondeur. CSS travaille sur différents niveaux de profondeur qui se superposent à la manière de couches transparentes.
On les appelle souvent calques. Cette technique ouvre une nouvelle dimension au
designer : il peut prendre du recul pour appréhender l’interaction des éléments. Libéré
des contraintes des mises en page à plat, de nouvelles manières de raisonner lui sont
accessibles : cette image n’est pas incrustée dans le design mais le survole ; cet arrièreplan ne fait pas partie du menu mais relève d’un autre niveau de profondeur, etc. Toute
la différence est là : les objets ne sont pas juxtaposés, mais bien souvent superposés.
7
Le positionnement en CSS
en constitue souvent la charpente. Nous expliquerons par étapes les bases du positionnement CSS, pour lesquelles il est nécessaire de bien comprendre le « modèle de
boîte » normalisé par le W3C.
Introduction au positionnement en CSS
L’arrivée de CSS 2 a généralisé le recours aux feuilles de styles. Celles-ci proposent
des mises en page bien plus souples que les antiques méthodes à base de tableaux.
Contrairement aux cellules de ces derniers, nécessairement adjacentes, les éléments
HTML stylés en CSS peuvent facilement être placés n’importe où.
Signalons un autre avantage de taille : la notion de profondeur. CSS travaille sur différents niveaux de profondeur qui se superposent à la manière de couches transparentes.
On les appelle souvent calques. Cette technique ouvre une nouvelle dimension au
designer : il peut prendre du recul pour appréhender l’interaction des éléments. Libéré
des contraintes des mises en page à plat, de nouvelles manières de raisonner lui sont
accessibles : cette image n’est pas incrustée dans le design mais le survole ; cet arrièreplan ne fait pas partie du menu mais relève d’un autre niveau de profondeur, etc. Toute
la différence est là : les objets ne sont pas juxtaposés, mais bien souvent superposés.
7
Le positionnement en CSS