Dans un exposé précédent, vous avez eu l'occasion d'entrevoir les possibilités du positionnement précis dans l'élaboration de colonnes de texte. Les exemples qui vous y ont été présentés étaient écrits dans le flux de la page, c'est-à-dire dans un ordre habituel tel que vous le connaissez dans une mise en page HTML. Pour obtenir ce résultat, les calques étaient dimensionnés et placés uniquement en fonction de la marge gauche de la page. Il ne s'agissait donc que d'un positionnement précis partiel. Dans les "cadres" que vous observez ici, le positionnement précis est réglé complètement par rapport aux bords supérieur et gauche de la page. Afin d'être visibles ... et de ne pas recouvrir ce texte, ils sont ornés d'une bordure légère.
Leur écriture est très simple, la voici :
Si vous avez des difficultés à lire ce texte avec les blocs, vous pouvez les faire disparaître :cliquez ici !. Pour les faire revenir, cliquez ici !. (Je vois d'ici vos yeux s'écarquiller à la mise en oeuvre de ces 2 évènements ... Rassurez-vous : vous en trouverez l'explication dans un autre exposé traitant des pages dynamiques : voyez dans le sommaire.)
L'écriture de ces blocs est la même que la précédente, si ce n'est que j'en ai quelque peu modifié les
marges pour cet exemple. Il suffit de passer en résolution supérieure pour vous en convaincre ... mais
revenez ensuite en "800 x 600" !
Bon ... je vois que vous n'êtes pas sûr de vous. Voici donc l'écriture complète de cette feuille de style
externe :
... dont la mise en place, en code source de la page, sera la suivante :
... non sans avoir installé, en tête de page, le lien vers la feuille de style externe, faute de quoi, rien n'est visible !
En résumé, il est parfaitement possible d'installer des blocs de données ou d'éléments en position absolue dans d'autres blocs affichés selon votre bon gré en position relative : cela facilite grandement la mise en page et permet, même à un débutant qui ne maîtrise qu'un HTML basique d'en comprendre le cheminement. Il saute aux yeux ... , me semble-t'il, que la première application intéressante sera la superposition de textes sur eux-mêmes (un ombrage par exemple : il y a un exposé à ce propos dans la rubrique "Html et JavaScript" de ce site) ou sur d'autres éléments ou objets : une carte géographique, un plan, une photo, etc.
Grâce à l'utilisation judicieuse des feuilles de style, il est donc aisément possible d'aller plus loin dans la présentation et de réaliser des pages où la main d'un graphiste semble avoir laissé son empreinte :