Des calques à la place des tableaux ? Pas toujours évident !

La raison de cette difficulté est, elle, bien évidente : l'interprétation différente des CSS par les navigateurs.

Avec un peu d'imagination et de patience, vous pourrez toutefois arriver à vos fins et vous débarrasser de balises qui sont souvent lentes au chargement et qui, probablement, seront remplacées dans le futur par les FDS. Les calques ont un autre avantage sur les "tableaux" : leurs "cellules" peuvent être dimensionnées selon les besoins du concepteur sans avoir de rapport de multiplicité par rapport aux autres "cellules".

Il existe deux possibilités pour réaliser des pseudo tableaux : le positionnement relatif ou le positionnement absolu. C'est le premier que nous utiliserons pour les réalisations qui suivent. Dans un exposé précédent, vous avez eu l'occasion d'en apprendre la technique ... et les difficultés d'obtenir un résultat identique avec tous les "butineurs" graphiques. Il est sans doute le plus intuitif à mettre en oeuvre lorsqu'il s'agit de "tableaux" dont les "cellules" ont les mêmes dimensions ou lorsque celles-ci sont destinées à être intégrées pour obtenir un résultat symétrique. En voici un exemple :

Pour un premier essai, c'est assez réussi, non !? Oui, mais uniquement s'il est visionné superficiellement avec nos deux navigateurs habituels pour les tests ... En scrutant davantage la fenêtre, force est de constater une légère différence de dimensions des "cellules". Ce phénomène déjà souligné dans l'exposé cité plus haut (datant pourtant de 2000 !) se confirme encore aujourd'hui, à l'aube de 2003. Pour rappel, je signalais à l'époque que Internet Exploseur (#) traçait la bordure sur le calque alors que Mozilla la traçait autour du calque, ce qui paraît logique. Dans l'exemple qui précède, où les calques sont réglés comme suit :

... les bordures gauche et droite totalisent 6 pixels en largeur et c'est la différence affichée par les 2 navigateurs.

Le problème se marque davantage lorsque le nombre de colonnes est plus important. Afin de souligner ces différences, voici 3 "tableaux" comportant le même nombre de "cellules". Celles du premier sont bordées, celles du second sont marginées et celles du troisième ne comportent ni marges, ni bordures. Pour que ces différences soient plus visibles, chacun des "tableaux" est également bordé de rouge ... source de problèmes d'affichage supplémentaires pour le navigateur de Micro$oft !

La feuille de styles utilisée comporte les règles suivantes :

Ici, le principe consiste à créer 3 grandes boîtes (les calques sont des blocs ou des boîtes) dans lesquelles on va installer un certain nombre (ou plutôt : un nombre certain !) de boîtes plus petites. Afin de pouvoir se loger dans l'espace limité qui leur est alloué, chacune des cellules devra être dimensionnée afin de ne pas déborder ! Pour cela, il faut également tenir compte de l'épaisseur des bordures ou des marges lorsqu'elles sont présentes. Vous comprenez ainsi les différences constatées ci-dessus. La page comportera les balises suivantes pour obtenir l'affichage désiré :

Vous aurez remarqué que la technique utilisée consiste à aligner chacune des cellules à partir de la gauche avec un float : left. Voici le résultat obtenu :

Eh oui : malheureux utilisateurs de IE (du moins jusqu'à la version 6.0), des trois "tableaux", seul le premier est plus ou moins correct ! En cause : la bordure de ceux-ci mais aussi celles des petites boîtes. Eliminons la bordure de la grande boîte : la supercherie (si l'on peut dire) n'est plus franchement visible et, enfin, le résultat paraît à peu près identique (si l'on est pas trop pointilleux, évidemment !) mais uniquement dans la premier et le troisième exemple :

Mozilla s'avère, ici aussi, le navigateur le plus respectueux des règles de style employées. Sachant cela, une conclusion s'impose (ne revenons pas sur le manque de rigueur de Internet Exploseur ...) : si vous voulez obtenir un affichage satisfaisant dans les deux navigateurs, il faut "oublier" l'utilisation des marges. Vous désirez voir ce que l'on peut obtenir en utilisation concrète avec un "tableau" un peu plus élaboré et comportant des liens ? Activez alors le lien "Memento des champignons" repris ci-dessous. Il vous mènera à l'un de mes sites où les "tableaux" ont beaucoup d'importance puisqu'ils constituent le lien principal vers toutes les pages. La fenêtre sera affichée en superposition et il vous suffira de "cliquer sur la croix de suppression (X) située dans le coin supérieur droit de celle-ci pour revenir à l'exposé. Attention : cette page contient plus de 50 diapositives ... et totalise près de 250 ko : la qualité des photos est à ce prix ! Le "tableau" s'affichera toutefois très rapidement et son "ossature" sera donc directement visible.

Dans cette application, c'est la méthode la plus simple qui a été utilisée. Chaque ligne comporte deux cellules destinées à contenir une diapositive, les deux autres étant destinées à en donner une légende ou un commentaire. Il n'y a aucune marge ni bordure de côté : la séparation est suffisamment marquée par les différences de contenu. Il n'existe donc qu'un bordure horizontale simple séparant chaque ligne. Ainsi, l'affichage est parfaitement identique sur tous (ou presque ...) les navigateurs.

Allons un peu plus loin avec l'exemple ci-dessous :

commentaire

commentaire

commentaire

commentaire

A l'affichage : 8 cellules sur une ligne ; vous pouvez naturellement multiplier le nombre de lignes ... De prime abord, le résultat peut paraître banal et n'être qu'une multiplication de cellules. Si vous passez le curseur de votre souris sur l'emplacement des images, vous remarquerez que, comme dans l'exemple que vous venez de quitter, elles constituent des liens. Ici, ils sont naturellement fictifs. Si vous êtes toujours accroc de Internet Exploseur, vous ne verrez que la "petite main" signalant un lien ... et c'est tout ! Si vous êtes l'heureux possesseur de Mozilla, vous constaterez que ce dernier, fidèle aux règles des CSS, vous offre en sus un bel effet de "rollover" ! 3 petites règles auront suffit pour cela :

Elles comportent, en quelque sorte, un "double sélecteur", la balise A habituelle des liens, associéé à la balise IMG correspondant à l'image AUTOUR de laquelle l'effet de "rollover" devra être actif. Il est utile d'y ajouter une classe (test) afin de différencier ce lien des autres pouvant exister sur la page. Rien de plus logique ... mais, a l'évidence, Internet Exploseur manque là de logique et reste de marbre ... Dommage ! Il existe bien une possibilité, bien moins logique, pour obtenir un résultat approchant (j'insiste : approchant). Elle consiste à ignorer la balise IMG dans l'élaboration des règles. Vous en voyez le résultat ci-dessous (auquel il est ajouté une couleur de fond lors du passage du curseur sur le lien) :

commentaire

commentaire

commentaire

commentaire

Lecteurs équipés du navigateur Mozilla, rassurez-vous : la bordure supérieure s'affichera SOUS l'image en utilisation normale. Si ce n'est pas visible dans les exemples utilisés, c'est tout simplement parce qu'il y est fait usage d'images transparentes.

Voilà encore un de ces "petits arrangements" parfois utiles pour obtenir un résultat satisfaisant avec les différents navigateurs graphiques. Les versions antérieures à Internet Exploseur 5.5 sont toutefois totalement insensibles à ces règles de style, comme dans le premier exemple ... Dans le cas présent, il vous reste à faire un choix : obtenir un résultat parfait avec Mozilla en abandonnant un effet visuel avec son concurrent ou choisir un compromis qui ne paraît pas vraiment satisfaisant ... Il faut espérer, encore une fois, que les protagonistes se mettront rapidement d'accord pour donner entière satisfaction à leurs utilisateurs ...

Cet exposé vous a permis d'entrevoir les possibilités actuelles de remplacement des archaïques tableaux au profit des calques lorsqu'il s'agit d'une mise en page. Le positionnement relatif utilisé ici vous permettra de faire face à l'essentiel de vos besoins. Afin de compléter le sujet et répondre à des impératifs plus pointus, un autre exposé concernant le même sujet, en positionnement absolu cette fois, sera disponible ultérieurement. Si vous ne cherchez pas à tout prix les fioritures inutiles, la première méthode est pour vous ! Retenez toutefois que, quelle que soit celle que vous adopterez, vos visiteurs y gagneront largement en temps de chargement et vous serez parfaitement en conformité avec les normes du W3C. Ce dernier point n'est pas négligeable : il est une garantie de pérennité pour vos pages.

Convaincu ? Alors, allez-y : faites le ménage de votre site et virez les tableaux inutiles !