Div, body et javascript

Salut,

J'utilise, pour visualiser les images de mon site, le framework Highslide (http://highslide.com/) qui marche super bien. Seul petit hic, je souhaite avoir un background un peu complexe ne pouvant se r�sum� en une image appliqu� au style body.
J'utilise donc plusieurs div faisant toute la largeur du body (width: auto ou 100%) afin de construire le background.
Voici une illustration : http://jf-larocca.net/test/integration.html on notera que la couleur verte appliqu� au body dans cette page sera remplacer par une image.

La ou �a se complique c'est que lorsqu'on ouvre une image, qu'on la d�place vers la droite et qu'on scroll, Surprise!! , le ciel s'arr�te net.

Apr�s de nombreux essais infructueux en CSS j'ai d�cid� d'appr�hender le probl�me en javsacript, dans le framework. Mais la �galement j'ai �t� bloqu�.
J'en ai parl� � l'auteur et il m'a orienter vers le CSS pour r�soudre le probl�me. Donc... case d�part...

Est-ce que quelqu'un sait comment obliger une balise div a conserver STRICTEMENT la m�me largeur que le body (en prenant en compte les mouvement d'image g�r� en javascript)?
Ou si vous avez d'autres propositions, je suis preneur.
Modifié par dew (30 Dec 2008 - 14:41)

Bonjour,

Une remarque en passant et pour éviter des confusions: Highslide n'est pas un framework. C'est un script (ou peut-être un ensemble de scripts) pour l'affichage de contenus en «fausse pop-up», semblable à Lightbox et aux multiples dérivés.

Pour le problème lui-même:

1. Un élément en display:block enfant de BODY prendra la largeur de BODY.

2. Dans la plupart des navigateurs (tous sauf IE 6-7, en fait), la largeur de BODY ne dépasse pas, par défaut, la largeur du viewport (zone de visualisation du navigateur). Ce qui signifie que quand il y a une barre de défilement horizontale, on a à priori des contenus qui dépassent de BODY.

3. En display:table et width:100%, BODY pourra dépasser la largeur du viewport si ses contenus l'exigent (contenus plus larges que le viewport). Mais attention: que les contenus qui sont dans le flux, pas ceux positionnés en fixe ou en absolu!

4. La seule solution à ma connaissance dans ce cas précis est d'utiliser le positionnement fixe avec position:fixed; top:0; right: 0; bottom: 0; left: 0; sur ton div#wrap (fort mal nommé). Mais ça pose deux problèmes: pas compatible IE6 (mais bon, peut-être moyen de dire que tant pis, et de cache complètement ce DIV?); et effet qui ne correspond pas forcément à ce que tu recherches.

Tout ça est un peu compliqué, mais pas plus étonnant que ça: une page web étant un objet aux dimensions intrinsèquement fluides, gérer la verticalité (hauteur de 100% par exemple) est casse-gueule, et gérer le reflux des contenus et les contenus qui dépassent en largeur l'est encore plus.
Modifié par Florent V. (30 Dec 2008 - 16:16)

Bonjour et merci de ta réponse instructive.

Effectivement, ta solution (4) fonctionnerait si il n'y avait pas de texture.
Cependant l'effet n'est absolument pas esthétique (sinon si il aurait fallu sacrifier IE6, ça ne m'aurait pas posé trop de problème ).

Je suis tout de même surpris que personne d'autre n'ai eu cette difficulté...

jflr a écrit :
Je suis tout de même surpris que personne d'autre n'ai eu cette difficulté...

J'ai dû répondre à des questions similaires dans à peu près cinq ou six sujets en 2008. Donc ça ne fait pas «personne d'autre».

À tout hasard, on peut avoir un aperçu du design à réaliser?