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
Pour info, impeccable sur Safari 1280×800
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
J’avais trouvé
http://www.cssplay.co.uk/layouts/background
qui ressemble à ta démarche
Je suis très intéressé parce que tu es en train de faire Bien bonne initiative ! Bonne chance
Bonjour Paco… Zen pour safari.. merci
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 😉 ), 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 Julien.. merci… et si tu dois utiliser cette template, tu m’en verras ravi 🙂
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
OK ça fonctionne parfaitement sous FF 3 PC/Mac, Safari MAC, IE7.
Par contre l’image de background ne s’étend pas sous IE6.
Merci… ah… ce bon vieux IE6… bon… il va falloir remettre les mains dans le code… 🙂
C’est pas gagné, vu le comportement de IE6… cela dit il est encore très utilisé.
Bon à priori MinMax.js permet de tout résoudre en une seule ligne: http://tinurl.us/09cd0f
Quelqu’un peut confirmer?