Probleme d'affichage

Bonjour,

Mon premier post sur ce forum
J'ai un petit soucis avec mon site et j'espère trouver une solution ici.

Quand je resize ma fenêtre de navigateur dans une taille plus petite que la résolution du site j'ai une scroll barre horizontal. et quand je srcoll vers la droite j'ai une bande blanche qui s'affiche. Est ce que quelqu'un sait d'où ça vient.

J'avais trouver la solution en mettant dans mon body :
position:fixed;
width:100%;

Mais ensuite impossible de scroller verticalement.

Merci de votre aide.

Bonjour Designbutterfly et bienvenue ,

Sans code complet ou une page en ligne pas facile de se prononcer.

j'ai enlever le lien du site.
Modifié par Designbutterfly (23 Oct 2008 - 13:22)

Hello et bienvenue

6h14 ?
Je compatis...

Ça m'arrive de tomber sur ce "bug", si on peut l'appeler comme ça. Je pense qu'il est lié à une mise en page faite avec les flottants.

Je n'ai jamais cherché à creuser d'avantage. Si les dimensions de ton site sont bien calculées la scrollbar horizontale ne devrait jamais apparaître (en plein écran pour les résolutions supérieures ou égales au 1024x768, ~90% des internautes).

Dans ton cas il y a juste un petit réglage à faire sur la largeur pour que le site tienne sans déborder en 1024x768 (peut être un width + padding mal calculé).

A bientôt

Sympa le design, au passage

Lol 6h14 + 6h de décalage ce qui fait 12h14 chez moi.

Merci je vais essayer ce que tu as dit.

Bonjour Designbtterfly,

A première vue je dirai que ton problème viens de #HeaderDroite positionné en absolue et collé à droite.

Comme le design semble fixe en mettant la position à left et en calculant l'espace nécessaire cela semble fonctionner.

Bonjour,

Le problème observé vient du fait que tu as des conteneurs de premier niveau prenant toute la largeur du viewport, et dedans des conteneurs centrés de largeur fixe (975px pour certains, pas vérifié pour tous).

Les conteneurs de premier niveau prennent une largeur qui est limitée à la largeur du viewport (zone de visualisation du navigateur), avec la plupart des navigateurs. Je ne sais plus si c'est un comportement standard, ou une implémentation particulière de la spécification qui ne serait pas assez précise sur ce point.

Ce phénomène a lieu également si tu supprimes les width:100% sur tes conteneurs de premier niveau (#Menu, #Header, #ContentGeneral et son enfant #ContentFondImg). Supprime-les tout de même, ils sont parfaitement inutiles.

Un correctif possible: donner une largeur minimale à ces conteneurs de premier niveau.
Ce que tu peux faire:
1. Passer tous tes conteneurs de second niveau (ou de troisième niveau dans le cas de #ContentIndex) en width: 975px;, ou autre largeur compatible 1024px (donc PAS 1024px, mais au moins 30px de moins!).
2. Utiliser un min-width: 975px (ou autre largeur, cf. le point 1) sur les conteneurs de premier niveau, de même que sur #ContentFondImg.

Ça devrait marcher plutôt bien.

knarf a écrit :
A première vue je dirai que ton problème viens de #HeaderDroite positionné en absolue et collé à droite.

Il me semble que ce n'est pas le problème principal ici.

Tu as surement raison j'ai pas encore dormi donc pas les yeux en face des trous.

J'aurai d'ailleurs peut-être pas du répondre

Merci Florent V ça marche c'est super !

Florent V. a écrit :
Un correctif possible: donner une largeur minimale à ces conteneurs de premier niveau.
Ce que tu peux faire:
1. Passer tous tes conteneurs de second niveau (ou de troisième niveau dans le cas de #ContentIndex) en width: 975px;, ou autre largeur compatible 1024px (donc PAS 1024px, mais au moins 30px de moins!).
2. Utiliser un min-width: 975px (ou autre largeur, cf. le point 1) sur les conteneurs de premier niveau, de même que sur #ContentFondImg.

Super !

Merci pour la solution, j'ai toujours cru que ce pseudo-bug resterait pour moi sans explication / solution. J'me demande bien d'ailleurs comment t'as pu en arriver à tester un min-width sur un conteneur fluide de premier niveau (sur un site sans largeur minimum fixée)

BeliG a écrit :
J'me demande bien d'ailleurs comment t'as pu en arriver à tester un min-width sur un conteneur fluide de premier niveau (sur un site sans largeur minimum fixée)

Heu... parce que ça m'a semblé logique?

On veut un conteneur qui prenne toute la largeur de BODY, mais pas lorsque BODY a une largeur inférieure à 975px. Donc: width: auto; (prendre toute la largeur disponible dans le conteneur, comportement normal d'un élément de type bloc) et min-width: 975px. À noter qu'on aurait pu appliquer le min-width directement à BODY, mais je crois que ça passe pas toujours bien dans les navigateurs (ce serait à vérifier...).

Florent V. a écrit :

Heu... parce que ça m'a semblé logique?

On veut un conteneur qui prenne toute la largeur de BODY, mais pas lorsque BODY a une largeur inférieure à 975px

Ça ne me semble pas si logique que ça. Si j'ai un conteneur fluide avec un background qui se répète horizontalement, ce conteneur DOIT prendre toute la largeur de body, que ce soit inférieur à 975px... ou pas. L'idée de rajouter un min-width:975px; ne m'aurait jamais chatouillé l'esprit.