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
Paco : 05 December 2008 à 2:47 pm
Pour info, impeccable sur Safari 1280×800
Grom : 05 December 2008 à 3:11 pm
Je comprend pas pourquoi tu utilises pas l’attribut “background” de CSS pour mettre une image en arrière plan. C’est peut-être bête comme question, mais je comprend pas :s
Serge : 05 December 2008 à 3:41 pm
J’avais trouvé
http://www.cssplay.co.uk/layouts/background
qui ressemble à ta démarche
Julien : 05 December 2008 à 8:26 pm
Je suis très intéressé parce que tu es en train de faire Bien bonne initiative ! Bonne chance
myrmex : 06 December 2008 à 3:42 am
Bonjour Paco… Zen pour safari.. merci
), je n’avais pas reussi à faire un pseudo “reclalcul” de l’image de fond.. en effet, quand vous agrandissez ou réduisez la fenêtre du nagigateur, l’image de fond est recadrée au mieux… si vous avez des améliorations à proposer, n’hésitez pas.. je suis ouvert à toutes suggestions…
Bonjour Serge et Grom.. c’est amusant, ce fut la premiere direction que j’avais pris… mais avec le background (ce qui repondra à ta question Grom
Bonjour Julien.. merci… et si tu dois utiliser cette template, tu m’en verras ravi
Lapinove404 : 06 December 2008 à 5:53 am
Pareil que serge et grom – je vois pas l’interet de la table.
je ferai peut-etre des test un de ces 4 pour mieux comprendre ;-D
Nico : 08 December 2008 à 9:37 am
OK ça fonctionne parfaitement sous FF 3 PC/Mac, Safari MAC, IE7.
Par contre l’image de background ne s’étend pas sous IE6.
myrmex : 08 December 2008 à 9:42 am
Merci… ah… ce bon vieux IE6… bon… il va falloir remettre les mains dans le code…
Nico : 10 December 2008 à 7:44 am
C’est pas gagné, vu le comportement de IE6… cela dit il est encore très utilisé.
Nico : 23 December 2008 à 9:21 pm
Bon à priori MinMax.js permet de tout résoudre en une seule ligne: http://tinurl.us/09cd0f
Quelqu’un peut confirmer?