Bonjour à tous

Je suis en train de refondre la page d'accueil de mon site pour arriver à un résultat qui devrait ressembler à ceci :

http://www.images-du-monde.fr/index.html

l'aspect graphique va peut être encore un peu évoluer mais la structure est relativement avancée, la voici :


<div id="global">

<div id="header">.......</div><!-- #header -->

<div id="containeur">

       <div id="content">
         <p id="date">...</p>
         <p id="intro">...</p>
         <p id="rubriques">...</p>
       </div><!-- #content -->

</div><!-- #containeur -->

<div id="footer">...</div>
<div id="xiti">...</div>

</div><!-- #global -->


Je bute sur un problème d'affichage des éléments graphiques du DIV GLOBAL et du CONTAINEUR, lorsque je réduis la largeur de la fenêtre de mon navigateur (sous FF, IE8, GC) de manière à obtenir du défilement horizontal. l'image de fond de CONTAINEUR, le filet orange et la couleur de fond de GLOBAL n'apparaissent plus lorsque je scrolle pour faire apparaître le reste de ma page. Et, Ô surprise, ce phénomène est inexistant sous IE6.

J'ai essayé pas mal de choses, dont appliquer la propriété overflow, sur différents DIV, avec différentes valeurs, j'ai monté une autre page avec les éléments contenus dans CONTENT positionnés en float... sans aucune amélioration !

Peut-être s'agit' il d'un problème de structure ? je sèche...

Bon, ce n'est pas un problème existentiel, et cette dégradation de l'affichage ne va pas se produire systématiquement mais j'aimerais bien partir sur de bonnes base pour la construction de cette page et surtout comprendre ce qui produit ce phénomène.

Merci d'avance pour vos conseils éclairés

Christophe
Modifié par Taklamakan (02 Feb 2010 - 22:30)
Salut,

Merci pour ton retour, bon c'est d'autant plus étrange alors !!!

Pour mieux visualiser, ci joint 2 captures d'écran, une réalisée sur mon mac avec écran grand format (même défaut sur FF et Safari) et l'autre sur mon PC sur FF,
c'est probablement plus explicite ?

upload/24076-Imagemac.jpg


upload/24076-imagepc2.jpg
Bonjour,

Merci d'avoir testé, je me sens moins seul... Smiley smile

En creusant un peu, je me suis aperçu que mon site n'est pas le seul a être affecté par cette bizarrerie !

à suivre donc, je poursuis mes recherches...
Bonjour,

Le problème ne survient que dans le cas où la fenêtre de ton navigateur est réduite et que tu scroll horizontalement, n'est ce pas ?

Tu peux commencer par retirer le "width : 100%" sur le div d'id "global", il n'est pas utile.
Pour ton problème qui survient quand le viewport est inférieur à la taille du site, je te conseille de passer ton div d'id "container" en : "min-width:900px;" (et non pas width:100%)
900px, qui est la taille du contenu fixe de ton site.

Ca règlera ton souci. Smiley cligne



Taklamakan a dit :
---
En creusant un peu, je me suis aperçu que mon site n'est pas le seul a être affecté par cette bizarrerie !
---
Oui en effet, 85% des sites au design de fond étendu et au contenu fixe, à vue de nez.
Rares sont les personnes ayant remarqué le "glitch", ou connaissant la solution pour le résoudre. Smiley cligne


EDIT : http://forum.alsacreations.com/topic.php?fid=4&tid=38538&s=
Voilà le post d'origine qui en parle, un grand merci à gcyrillus. Smiley cligne
Modifié par Nigel (05 Jan 2010 - 08:55)
Bonjour,

Je viens de tester et ça marche parfaitement, SUPER !!! Smiley biggrin

Je commençais à m'arracher les cheveux, et j'essayais maintenant de contourner le problème... par des artifices plutôt moyens Smiley confus

Le post de gcyrillus est très instructif à ce sujet, en tout cas, un grand merci pour ton aide.

Christophe
Modifié par Taklamakan (05 Jan 2010 - 20:04)