Porblème de width=100% en 800x600

Bonjour,

Je suis nouvelle sur le forum et mon html date de plusieurs années maintenant, je suis loin de comprendre les nouvelles subtilités apparues avec le PHP, le CSS et le W3C mais je tente de m'y mettre.

Je suis actuellement en train de faire un site : www.kawaiieries.com avec les moyens du bord. Mon code n'est pas propre du tout mais je vais le nettoyer et déplacer les élements du header, du footer et du menu de gauche dans des includes (comme là : http://www.kawaiieries.com/index18.php ). Mais avant cela j'aimerais remédier à un problème qui me pourrit mes journées depuis pas mal de temps sans parvenir à trouver la solution : la largueur de ma mise en forme.

Ce que je constate : en 800x600 apparait OU une scrollbar en bas (dans IE, des fois sous Firefox...) OU tout est décalé à gauche et ne prend plus la totalité de l'écran. Tout revient dans l'ordre si j'actualise.

Dans le pire des cas, le tableau de droite apparait en dessous du menu de gauche (comme là : http://www.kawaiieries.com/index20.html ), et dans d'autres (si j'actualise) il se positionne normalement.

J'ai tout essayé, supprimé les éléments un par un, changé les données, assemblé autrement... Je ne sais pas combien d'essais (voici une version sans les éléments centraux mais où le problème persiste : http://www.kawaiieries.com/index18.html ). J'ai tout recommancé du début et j'aboutis au même problème. Je me dis qu'il y a bien un moyen d'avoir du width=100% ailleurs alors pourquoi pas chez moi !

Apparement le problème vient de la balise width, si je mets 100% tout se décale à gauche, sans scrollbar. Mais si je mets width=780 ou 800 la scrollbar horizontale apparait de nouveau.

J'ai recherché dans le forum et posé la questions sur d'autres, mais pas de solution pour le moment.

Si quelqu'un a une idée, pour que ma mise en page soit vraiment de 100% (bref que les bandes vertes aillent d'un côté à l'autre), je suis preneuse !

Merci par avance ! Et désolée pour les crises d'apoplexie pour ceux qui auront le courage de jeter un oeil sur mon code.

PS. J'ai fait un autre embryon de site avec des colonnes positionnées par du CSS (je sais pas comment on dit, désolée !) et là pas de soucis, la mise en page ne bouge pas : http://wwW.reussirvosencheres.com mais bon le width est de 95%
Modifié par Chibiloo (21 Dec 2006 - 11:36)

Salut,

Si tu mets des valeurs de 780 ou 800 pixels en largeur, il est normal que tu obtienne une barre de défilement horizontale. Il faut que tu prenne en compte la largeur de la barre de défilement verticale, et que ton site de dépasse pas 760-770 pixels de large. Je crois que la barre de défilement fait 25 pixels de large, théoriquement on pourrait monter à 775, mais j'ai déja eu des problème à cette taille là, du coup maintenant j'ai réduit à 760 par sécurité.

Pour que tes bandes vertes prennent toute la largeur du navigateur, sache que par défaut, tout élément prend toute la largeur disponible, jusqu'à ce qu'on lui spécifie le contraire. Si tu ne mets pas de valeur cela devrait normalement fonctionner.

Bonjour, merci de ta réponse.

Je viens de faire un essai avec tes indications, qui me paraissent logiques.

Bizarrement le problème reste le même, c'est décalé à gauche. Pour le footer si je ne précise pas la width, la bande verte n'apparait que sous la surface de texte. Bref ça empire... (ici : http://www.kawaiieries.com/index21.html )

J'ai une barre de défilement en bas quelque soit le chiffre précisé sur la width. Et un décalage à gauche si je supprime le chiffre pour mettre un pourcentage.
Modifié par Chibiloo (21 Dec 2006 - 12:00)

Re,

#gauche{
float:left;
width:200;
}

#droite{
float:left;
width:600;
}

Déja précise une unité, 200 et 600 sont des pixels, des em, des pourcentages ?? Pareil pour tes font-size, il faut préciser l'unité. Prends en l'habitude, car cela pourra résoudre pas mal de soucis parfois.

Comme ton site est contenu dans un tableau, si on ajoute à ton style :

table {width:100%;}

Le tout prend la largeur du navigateur, mais il subsiste cette barre de défilement. J'ai pas trop le temps maintenant de regarder précisément, j'essayerai plus tard. Enfin déja si tu essaye de virer ton tableau pour faire la mise en page ca devrait t'aider

Re-Bonjour ! Merci pour ta réponse !

J'ai fait ce que tu m'as demandé. Si je mets : table {width:100%;}, pour le problème général, cela ne change rien mais le footer prend de nouveau toute la largeur.

J'ai enlevé le tableau ici : http://www.kawaiieries.com/index22.html mais le problème persiste, je n'ai plus la scrollbar en bas mais le tout est de nouveau collé à gauche. Si j'actualise tout revient en place.

J'ai essayé une nouvelle fois de refaire intégralement la mise en page en partant de zéro mais dès que je mets width=100% systématiquement le même problème apparait.

J'attends de tes nouvelles, merci pour ton aide ! J'en ai bien besoin !

Bonjour,

<div align="center"> .... Connais pas
<div style=" margin: auto;"> ... Ca le fais plus !!!

ou peut être <div style=" width: 100%;">



Pourquoi tous ces tableaux ?
Modifié par ghost (21 Dec 2006 - 17:54)