Hier soir, j’ai découvert un site « Ultrawide Background » tout en flash. En fait, le principe consiste à afficher une image en arrière plan et à placer ces différents éléments « par dessus ». Evidement, je me suis dit « et si j’essayais de faire la même chose en xhtml/css et sans l’aide d’un Framework » !
Et bien, c’est possible… Toute l’astuce tient dans en quelques lignes de code. Il suffit de placer un div à 100%, superposé d’un tableau à 100%, lui même contenant l’image. En principe, cette astuce permet de cadrer l’image dans toutes les résolutions. J’ai testé en 1024*768 et en 1680*1050. Le résultat est, à mon goût, meilleur sur la grande résolution… Je n’ai testé que les navigateurs FF3 et IE7.
Ce qui sous entend, que pour le moment, je n’ai pas testé le respect du XHTML et CSS… la compatibilité avec les autres navigateurs (Opera, Safari, IE6-, FF2- etc…)… mais c’est prévu et j’actualiserai l’article le moment venu 😉
Juste un bémol… Les images sont « grosses » et cela mangera pas mal de bande passante… Attention au petit hébergement…
Ce site m’a donné quelques idées pour la suite… et à venir très bientôt, un script de galerie d’image s’appuyant sur cette base…
Demo Template : Golf Web Site 2
Télécharger la template : Download
Licence : Creative Commons