Le positionnement précis des éléments, 2ème partie

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 :

{width:160px; height:69px; position:absolute; top:20px; left:10px; border:1px solid yellow}
{width:160px; height:69px; position:absolute; top:39px; left:210px; border:1px solid lime}
{width:160px; height:69px; position:absolute; top:53px; left:413px; border:1px solid fuchsia}
{width:160px; height:69px; position:absolute; top:69px; left:610px; border:1px solid blue}


Tels qu'affichés, les premiers blocs paraissent centrés par rapport à l'écran. Il n'en est rien et si vous passez dans une résolution supérieure à celle conseillée pour suivre cette rubrique (800 x 600), vous constaterez qu'ils sont alignés à partir de la gauche. Les règles reprises ci-dessus le démontrent d'ailleurs : chacun des calques est indépendant, n'étant pas "logé" dans un cadre "mère". Ceux qui sont en surimpression sur le texte présent sont écrits un peu différemment : leur position est réglée par rapport à un calque "mère" invisible (sans couleur de fond et de bordure) installé en position relative mais centré grâce à la classique balise  center . Dès lors, les calques internes voient leur position absolue réglée en fonction de ce cadre, c'est-à-dire par rapport à ses bords supérieurs et gauche !

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 :

#blc{width:695px; height:125px; position:relative; text-align:justify}
#bl1{width:160px; height:69px; position:absolute; top:7px; left:7px; border:2px solid yellow}
#bl2{width:160px; height:69px; position:absolute; top:20px; left:180px; border:2px solid lime}
#bl3{width:160px; height:69px; position:absolute; top:33px; left:353px; border:2px solid fuchsia}
#bl4{width:160px; height:69px; position:absolute; top:46px; left:526px; border:2px solid blue}

... dont la mise en place, en code source de la page, sera la suivante :

<div id="blc">  : ouverture du calque mère dans lequel est écrit le second paragraphe
<div id="bl1"> </div>  : 1er bloc bordé en jaune
<div id="bl2"> </div>  : 2ème bloc bordé en vert
<div id="bl3"> </div>  : 3ème bloc bordé en fuchsia
<div id="bl4"> </div>  : 4ème bloc bordé en bleu
</div>  : fermeture du calque mère

... 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 :

suite