Le positionnement précis des éléments

Les feuilles de style ont également un avantage indéniable par rapport aux balises de Html : la possibilité d'un positionnement des éléments, objets ou "blocs de données" précis sur la page.
Les feuilles de style ont également un avantage indéniable par rapport aux balises de Html : la possibilité d'un positionnement des éléments, objets ou "blocs de données" précis sur la page.
Les feuilles de style ont également un avantage indéniable par rapport aux balises de Html : la possibilité d'un positionnement des éléments, objets ou "blocs de données" précis sur la page.

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.

Oui ... mais ! Comme bien souvent, malheureusement, chaque navigateur a une interprétation personnelle des commandes de langages, qu'ils soient HTML, CSS, JavaScript ou d'autres encore. Il faudra donc "composer" en serrant au plus près les recommandations du W3C : il finit généralement par se faire respecter par les éditeurs de "butineurs du Web" et c'est ainsi que l'on en arrive à une certaine (?!) standardisation. Les langages évoluant vite, ce n'est pas toujours évident !
C'est bien pourquoi chaque "webmestre" digne de ce nom doit avoir au moins les deux "références" dans ce domaine. Ici, référence ne veut pas dire exemple à suivre mais tout simplement exemple "à subir" : les lois du marché sont telles que ce sont les éditeurs qui tentent d'imposer leur produit ... qui sera ou ne sera pas adopté par les utilisateurs ... A vous, donc, de faire un choix. A mon avis, Mozilla (et les navigateurs issus de cette famille) est le mieux placé pour être cette seconde référence. Quant à Internet Explorer, il est et reste incontournable.
Pourquoi Mozilla ? Parce qu'il est certainement le produit le plus proche des recommandations du W3C (je sais : cela irrite certains de voir revenir ce sigle bien souvent) et qu'il constitue "l'ossature" des futurs navigateurs édités par Netscape. Et comme ce dernier est en même temps le deuxième navigateur le plus utilisé dans le monde ... Mais ... : toujours en retard d'une guerre, au lieu d'utiliser les dernières mises à jour de son mentor, il s'ingénie à vouloir faire du neuf avec du vieux ...
Sachant cela, partez du principe que, un jour ou l'autre, ce que Mozilla veut ... Netscape le peut.

gif

Reste le problème insoluble des "indécrottables" qui ne veulent ... ou ne peuvent changer le butineur de leur système. Tant pis pour eux : ceux qui ne suivent pas sont largués, un jour ou l'autre.

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 :

{width:230px; float:left; padding:7px} pour la colonne de gauche
{width:230px; float:right; color:red; padding:7px} pour la colonne de droite
{margin-left:242px; width:230px; color:blue; padding:7px} pour celle du centre

enfermées dans le calque parent, écrit comme suit :

{width:730px; height:120px; font-family:Arial; font-size:12px; text-align:justify; margin-left:auto; margin-right:auto}

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 :

{width:230px; float:left; padding:7px} pour la colonne de gauche
{width:230px; float:right; color:red; padding:7px} pour la colonne de droite
{margin-left:242px; width:230px; color:blue; padding:7px} pour celle du centre

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 :

div.journal {width:760px; height:300px; font-family:Arial; font-size:12px; text-align:left;}

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 :

div.jourcol {width:170px; padding:5px}

... auxquelles on ajoutera les règles qui leur sont propres afin de les positionner de la manière suivante :

{background-color:#ffffcc; color:blue; position:absolute;left:20px}
{background-color:#cccfff; color:black; position:absolute;left:200px}
{background-color:#ccffff; color:green; position:absolute;left:380px}
{background-color:#ffffff; color:red; position:absolute;left:560px}

suite