Le positionnement précis des éléments, suite

Afin de mieux appréhender et tenter de corriger les différences d'affichages des navigateurs, lors des tests que je vous conseille d'effectuer avant la publication de votre page définitive, utilisez l'astuce suivante :

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



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.

Vous obtiendrez cet affichage en installant une couleur de fond pour chacun des calques "internes" en ajoutant une petite ligne, la règle de style suivante :

background-color:#ffffff

et en choisissant, évidemment, une couleur différente pour chaque calque, comme ci-dessus.
Ensuite, utilisez vos navigateurs de test afin de vérifier leur comportement : les différences sont frappantes !

Vous remarquerez, si vous ajoutez une bordure ( border:5px solid yellow), par exemple, que Mozilla l'applique "autour" du calque ... alors que Internet Explorer l'applique à l'intérieur ! Dans le cas de l'utilisation d'une marge interne dans chacun des calques ( padding:5px ), comme écrit dans la feuille de style utilisée ici, c'est exactement l'opposé qui se produit : Mozilla l'applique à l'extérieur et son concurrent à l'intérieur !. Le parfait alignement obtenu avec Internet Explorer pour l'affichage des 4 blocs écrits ci-dessus perd sa cohérence avec Mozilla. Le premier augmente donc la hauteur des calques pour y loger les données internes alors que le second en augmente la largeur, provoquant ainsi un chevauchement des blocs. Vous commencez à comprendre maintenant l'avertissement donné en début de cet exposé : le positionnement précis des éléments est réalisable mais ... dépend de la bonne volonté des acteurs en présence : les "butineurs" du Web. Dans cet exposé, le positionnement se limite à un affichage plus ou moins correct de colonnes de texte qui, comme vous l'avez vu, permet aussi d'insérer des images. Si celles-ci "entrent" bien dans les blocs grâce à un dimensionnement inférieurs à ceux-ci, pas de problème : il suffit de les déclarer par une balise que vous connaissez : <IMG SRC="image.jpg"> et les attributs qui en font partie.

Là où ça se complique vraiment, c'est lorsque la présentation d'une page se veut plus graphique : vouloir utiliser toutes les possibilités offertes par la technique des feuilles de style peut amener à des résultats catastrophiques ! Voyez plutôt dans la page suivante :