Problème ultra-bizarre : fond gif sur background "fixed"

Bonjour,

voilà je suis en train de me monter un blog sous wordpress.
et je viens de découvrir un pb ultra bizarre :

j'ai une image background sur la balise body. cette image est "fixed" et calée en haut à gauche du navigateur.
par dessus cette image, j'ai mes div de mon blog. ces div scrollent verticalement avec les ascenseurs du navigateur
( normal quoi ). parmis ces div, j'ai une image gif avec transparence ( une bordure grunge bouffée ) qui scroll donc
par dessus cette image en background ( du body).

Voici le souci :
quand je resize mon navigateur pour avoir les ascenseurs, et que j'utilise ces ascenseurs, et bien ma bordure grunge disparait !

avez-vous une idée de solution ?
( en fait, on dirait qu'un "élément transparent" pousse ma bordure grunge....)

Bonjour,

Une page en ligne, peut-être? Difficile d'en dire plus sans avoir tous les éléments sous les yeux.

Si la bordure est une image de fond, et que cette image de fond semble s'arrêter passé un certain seuil... eh bien c'est que le bloc qui porte cette image de fond s'arrête, tout simplement. À confirmer en utilisant l'un des outils qui vont bien: Web Developer toolbar, Firebug, etc.

Merci florent pour la réponse rapide. la bordure se répète en Y. voici la page en question : http://blog.blendesign.net pour générer le pb : resizer la fenêtre navigateur pour avoir l'ascenseur vertical. ensuite, utiliser cet ascenseur et regarder la bordure à gauche du blog.

j'ai oublié : une fois le pb créé, resizer à nouveau le navigateur : il y a bien un truc transparent qui semble "pousser" ma bordure ! même avec firebug, je vois pas du tout l'origine du pb....

je me pose une question : ça viendrait pas du fait que ma bordure est "toute seule" dans un div avec un height à 100% ?

5tef a écrit :
ça viendrait pas du fait que ma bordure est "toute seule" dans un div avec un height à 100% ?

Bingo. Tu figes la hauteur de ce bloc à 100% de celle du viewport, donc voilà... Et comme il est indépendant du contenu, il ne risque pas de s'adapter à ce contenu. Moralité: il faut pas intégrer cette bordure comme ça, ça peut pas marcher.

En passant, c'est normal ce florilège de blocs flottants dans ton code? Vu ton design, il me semble que tu as besoin de un flottant en tout et pour tout. Dans ton intégration, j'en compte 14. Ça fait 13 de trop (et 13 risques de faire explorer la mise en page en cas de problème ou de mauvaise gestion des flottants ou des dimensions exactes des blocs par tel ou tel navigateur... je pense bien sûr à Internet Explorer).

Lol, je m'en doutais !

comment je peux intégrer cette bordure du coup ?

concernant les blocs flottants : je débute en CSS et j'essai de développer "propre" ( ça semble loupé là ) .
Par contre, je teste mon blog sur PC , avec IE 6 , firefox , opera et safari : tout est OK et a le même rendu.

qu'est-ce que tu appelles "flottant" : les float ? je veux bien les enlever, mais tout part en couille !!!
Modifié par 5tef (02 May 2008 - 13:09)

5tef a écrit :
qu'est-ce que tu appelles "flottant" : les float ?

Oui. Par contre les enlever sans refaire l'intégration ça peut pas marcher, comme tu l'as constaté.

Pour ta bordure, elle devrait être en image de fond d'un bloc englobant tout le contenu (ou l'essentiel du contenu). Et gaffe au dépassement des flottants:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Hello,

voilà, je refais toute la base css.
j'ai essayé de limiter au max les float. je pense en avoir 2 au final.

pour ma bordure, j'ai effectivment fait que tu me l'as conseillé, à savoir : un div avec la bordure en fond, et qui couvre toute la page.
les autres div sont donc dans ce grand div.

souci : bien que mettant un height, min-height à100%, la hauteur de ce div n'occupe pas toute la hauteur du navigateur.
comment y remédier ?

c bon g trouvé :

http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html

;)

ça semble tout bien marcher !