Problème mise en page

Bonjour,

J'ai un problème de mise en page sur mon site
Lorsqu'on regarde la page d'accueil http://www.protection-des-animaux.org/ avec internet explorer on voit qu'en bas au centre, c'est trop court : entre l'image "suite" et la ligne jaune, il y a un trou blanc. Quand je regarde dans firefox, c'est trop long, le fond du centre dépasse sur la ligne jaune.

je ne comprends pas trop ce qu'il se passe ? Est ce une histoire de padding qui marche mal avec IE ? Si c'est ça, je vois même pas ou.

Merci de votre aide.

En effet il y a un souci. Sans vouloir te décourager, l'affichage est encore différent dans Opéra. Je ne pense pas que ça soit un problème de padding car IE6 les comprends comme Mozilla et Opéra. Mais il faudrait que tu affiches le code CSS de ta page pour que je puisse t'aider d'avantage. (ou du moins que j'essai).

Bonjour,

Protanim a écrit :

je ne comprends pas trop ce qu'il se passe ? Est ce une histoire de padding qui marche mal avec IE ? Si c'est ça, je vois même pas ou.

Sur le détail, c'est un problème de fusion des marges entre ta colonne droite et le contenu précédent/suivant, ainsi qu'à l'intérieure de celle-ci. IE fusionne incorrectement les marges verticales. Un height: 1%; sur .droite1 (réservé à IE Windows par une CSS en commentaires conditionnels) corrige son comportement en jouant sur le layout (un état des éléments propre à ce navigateur). Un z-index et une position relative sur le pied de page permet de mettre au premier plan la bordure jaune, si c'est l'effet recherché.

Mais sur le fond, cette mise en page est entièrement à revoir. En effet :
- les colonnes gauche et centre, en position absolue, n'auront aucune influence sur le placement du pied de page (dont le clear:both n'aura aucun effet)
- C'est la colonne droite, en flux, qui est seule supposée repousser ce pied de page suffisamment bas (mais pas trop). Il suffit que tu aies à modifier le contenu de cette colonne pour que sa hauteur change, et que le pied de page et les deux autres colonnes se superposent.

Pour que tes trois colonnes puissent agir sur le pied de page et obtenir un placement correct de celui-ci quelque-soit leur hauteur, il faut reconstruire cette page en utilisant les flottants pour les 2 premières colonnes. Et en utilisant si nécessaire le fix ci-dessus pour gérer la fusion des marges dans IE Windows.
Modifié par Laurent Denis (11 Sep 2005 - 10:48)

D'abord, merci à tous les deux.

J'ai repris la mise en page en modifiant mon .gauche, .centre et .droite ainsi que dans le centre mes 3 .centre2 g, c, d.

Effectivement c'est mieux, ça de toute façon j'en doutais pas vu que je débute à l'inverse de vous.

Par contre, comment faire en sorte que le background image (.centre) ou couleur (.droite) aille jusqu'à la ligne jaune.

Dans mon cas, l'affichage est parfait dans Firefox mais dans IE, ça me fait un trou blanc en bas, donc j'aimerais que le background continue, pour que ça se voit moins.
Ce trou blanc est certainement un problème, peut être ce que tu m'as expliqué mais j'avoue que je n'ai pas tout compris. Mais de toute façon, si imaginons mon .gauche est plus grand, il me manquera du background au centre et à droite.

Encore merci

Ah j'allais oublié, en attendant de résoudre le souci j'ai mis sur une url temporaire : ICI
et la feuille de style : ICI
Modifié par Protanim (11 Sep 2005 - 09:53)