Non ! Il ne s'agit pas de textes insérés dans des tableaux mais de l'utilisation des calques pour obtenir un résultat assez semblable. Pour un concepteur de pages, il est presqu'aussi facile d'utiliser cette technique que la presque antique pratique des balises <TABLE>, <TR>, <TD>, etc ... Ce n'est qu'une question de "bonne" habitude.
Mais, je m'égare et me lance ici dans une tirade pseudo-philosophique qui nous écarte du sujet. Nous disions donc : positionnement précis des éléments. Eh bien, je vais vous décevoir quelque peu : c'est faisable ... et ce ne l'est pas. Pourquoi ? Pour les raisons que j'ai évoquées dans la diatribe qui précède. Il faudra donc composer et pallier les manques de certains par des "arrangements" qui conviendront aux deux références utilisées pour les tests.
Nous allons voir, dans cet exposé, comment réaliser une page de type "journal" sur plusieurs colonnes. Cette technique se limitera à un affichage "précis" dans le sens horizontal, en positionnant des blocs de données dans le suivi logique de l'écriture d'une page, comme s'il s'agissait de paragraphes ou de tableaux.
Dans le premier exemple (le triptyque), il n'est pas du tout question de positionnement absolu puisque les règles de style utilisées sont "relatives", au sens exact du langage CSS. Ce triptyque possède un avantage indéniable, raison pour laquelle je le propose ici. Le résultat est obtenu, comme dans les exemples précédents (images et textes), en utilisant les règles de style suivantes :
enfermées dans le calque parent, écrit comme suit :
Vous aurez sans doute remarqué qu'il a une particularité : il est bien centré dans la page, quelle que soit la résolution d'écran ou fenêtre activée (supérieure ou égale à 800 x 600 pixels !). Ce constat est valable pour Internet Explorer mais aussi pour Mozilla. Il aura été nécessaire de composer : pour le premier, il faudra ajouter une règle de style à la page (dans la balise <BODY>) : text-align:center alors que le second suit scrupuleusement les normes des CSS : celles reprises ci-dessus en rouge
Je vois d'ici votre mine renfrognée et vos yeux rivés au margin-left:242px inclus dans les règles du calque central. Différence d'affichage de navigateur oblige : il s'agit de composer, là aussi, pour obtenir un résultat satisfaisant ...
Malheureusement, ce qui continue à bien "fonctionner" avec Mozilla pour les autres usages de ces règles, ne fonctionne plus avec son concurrent ... lorsqu'il s'agit d'afficher un seul calque. Dans ce cas, il est nécessaire d'enfermer le calque unique ... dans un calque parent normalement inutile ...
En voici l'exemple avec le même encadré que ci-dessus :
Il aura été nécessaire d'ajouter un text-align:left dans le calque parent pour obtenir un résultat similaire, faute de quoi, le texte aurait également été centré, comme dans ce paragraphe.
Le second exemple nous fait entrer de plein pied dans le principe de positionnement précis. Je dis
principe car, comme vous l'aurez déjà remarqué, il existe une marge entre celui-ci et la réalité des
navigateurs.
Voyons d'abord la première écriture : celle du calque parent :
Tout en sobriété, il fixe les dimensions mais aussi les valeurs de police et de texte qui seront valables pour les calques internes. Ceux-ci auront 3 règles identiques, écrites comme ceci dans la feuille de style principale :
... auxquelles on ajoutera les règles qui leur sont propres afin de les positionner de la manière suivante :