[Résolu]Problème de mise en forme avec Mozilla

Bonjour à tous,

J'ai un affichage un peu surprenant avec Mozilla sur ma page pourtant toute simple.

Je donne ici différentes versions de la page :

http://www.final-fantasy.ch/
http://www.final-fantasy.ch/Ff8/
http://www.final-fantasy.ch/Ff9/
http://www.final-fantasy.ch/Ff12/
http://www.final-fantasy.ch/Ff13/

Sur le premier des deux liens (index2), vous pouvez remarquer que l'affichage est correct : la place pour la bannière en blanc, le menu en rouge en float sur la gauche, le pied de page en bleu en bas et le container principal de fond en vert (div "container"). Le container "content" avec fond gris n'apparait pas puisqu'il ne contient rien.

Sur le second lien (index), vous pouvez voir que j'ai ajouté des simple paragraphes dans le div "content", ce qui a pour effet de faire apparaitre le cadre gris. Par contre, cela a également pour effet de mettre environ un demi centimètre de blanc en dessous du div "container". Un espace s'est inséré avant le div "footer" de pied de page.

Cet espace étant naturellement indésirable, comment puis-je faire pour qu'il n'apparaisse plus? Les marges des div sont bien sur 0px à l'exception naturellement du div "content" qui a une marge gauche de 150 px pour éviter d'écraser le menu en float left....

Merci d'avance pour vos réponse, je précise que je suis sur Mozilla 1.7.10 et que cela marche parfaitement sur Internet Explorer (à l'exception que IE ne reconnait pas le min-height : 400 px du div "container", mais bon, c'est le navigateur, je peux rien y faier...)

Salutations
Modifié par PMingard (14 Aug 2011 - 17:51)

Bonjour,
supprime ton margin left de 150px dans ton content, remplace le par un float (left ou right), et donnes-y une largeur:

#content {
float: left;
width: 72%;
}

Merci bien, ça a marché, mais pourrais-je avoir une explication de mon erreur? Que je puisse comprendre ce détail, parce que j'ai vraiment pas compris la différence entre ma solution et celle que tu m'as donnée (sauf que la tienne marche )

Merci d'avance

bonjour,

dans ff, un element placé en float aura pour effet de deborder de son conteneur (d'ou l'utilité d'un "footer ou autre non qu'on lui donne" ,placer en clear:both;pour etirer le conteneur).

la solution precedente use de cette particularité dans ff pour cacher une autre particularité(..jusqu'au moment ou ça deborde si il n'y a pas de "footer").

je prefere utiliser le (margin:0; ou margin-top:0; ou margin-bottom:0; selon les cas de mise en pages) sur les balises p et h1,..,h6, lorsquelles se trouvent etre la premiere et/ou la derniere dans la page ou un div par exemple.
Cette mise a zero ne change rien dans IE, qui l'applique par defaut.

Dans ta page j'aurais opté pour le

p {margin:0;}

car tu as cette balise p apparaissant aussi en premier dans ton div#content.

Change la valeur de margin pour t'apercevoir, que cela change aussi l'ecart entre container et footer.

Tu peux gommer aussi cette difference en faisant un padding:1em 0; dans container, mais comme ton menu n'a ni p ni h1 (amenant un comportement identique a content) il ne se decalle alors que d'un interligne quand content en prend alors 2 .1(sans le margin:0;) +1 (le padding).

amusant

a plus

Le float met ta boîte en "flottante", et donc ne repousse plus vers le bas en fonction de son contenu, d'où venait la bande blanche indésirable. Je t'ai fait ajouté une largeur, pour que ta boîte ne se rétrécisse pas en fonction de son contenu, ce qui aurait fait apparaître une bande sur le côté, cette fois-ci.

gcyrillus a écrit :
bonjour,

dans ff, un element placé en float aura pour effet de deborder de son conteneur (d'ou l'utilité d'un "footer ou autre non qu'on lui donne" ,placer en clear:both;pour etirer le conteneur).

la solution precedente use de cette particularité dans ff pour cacher une autre particularité(..jusqu'au moment ou ça deborde si il n'y a pas de "footer").

je prefere utiliser le (margin:0; ou margin-top:0; ou margin-bottom:0; selon les cas de mise en pages) sur les balises p et h1,..,h6, lorsquelles se trouvent etre la premiere et/ou la derniere dans la page ou un div par exemple.
Cette mise a zero ne change rien dans IE, qui l'applique par defaut.

Dans ta page j'aurais opté pour le

p {margin:0;}

car tu as cette balise p apparaissant aussi en premier dans ton div#content.

Change la valeur de margin pour t'apercevoir, que cela change aussi l'ecart entre container et footer.

Tu peux gommer aussi cette difference en faisant un padding:1em 0; dans container, mais comme ton menu n'a ni p ni h1 (amenant un comportement identique a content) il ne se decalle alors que d'un interligne quand content en prend alors 2 .1(sans le margin:0;) +1 (le padding).

amusant

a plus

Voilà une explication bien précise mais dont je n'ai pas tout saisi.

Mais j'ai en tout cas saisi que les marges des éléments intérieurs d'un conteneur modifient les marges du conteneur, ce à quoi je ne m'attendais pas. Ceci pour une raison obscure uniquement lorsqu'il y a un élément en float...

Je vais m'amuser avec ce genre de détails, merci pour vos réponses...