Problème avec background-color

Bonjour,

Cela fait quelques jours maintenant que je travaille à convertir mon site en XHTML strict. Ma page est convertie à 100% (aussi bien avec le XHTML validator qu'avec le CSS validator).

Cependant, j'ai un problème de rendu sur ma page lorsque ma zone de texte est trop petite.

Je m'explique:

http://www.fusionofdreams.com/index.php
Grande zone texte principal -> fond blanc sur toute la page -> OK

http://www.fusionofdreams.com/tags.php
Hauteur de la zone du texte principal < menu -> fond blanc partiel (seul le menu est OK) -> KO

A part mettre un min-height sur ma zone (ce que je ne trouve pas correct), je ne vois pas trop comment faire ?

Quelqu'un a-t-il une idée ?

Merci d'avance,
Arnaud LEF97

Bonjour,

tu aurais deja pu mettre un fond blanc à ta page, puisqu'il est présent partout.

Re,

Pour mieux expliquer mon problème, j'ai ajouté la partie du code concernée.

Concrètement, j'ai 3 zones:
- une zone principale (mon conteneur)
- une zone texte principal contenant le texte
- une zone menu (calé à droite)

J'ai actuellement résolu mon problème avec le min-height à 2000px pour le conteneur. Mais vraiment, je ne trouve pas cette manière correcte.
Je pense que le problème vient du fait du menu qui est calé à droite, on dirait qu'il n'est pas pris en compte dans la hauteur du conteneur.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

#ZonePrincipale{   display:block; width:1000px; margin-left: auto;margin-right:auto; padding:0; background-color:#FFFFFF; min-height:2000px; }   #TextePrincipal{ width:750px; margin-top:0;margin-left:10px; padding-top:10px; text-align:justify; background-color:#FFFFFF; height:100%; }   #Menu{ float:right; width:210px; margin-right:10px; padding:0; background-color:#FFFFFF; height:100%; }

---

Merci d'avance pour toute l'aide que vous pouvez m'apporter.

Cordialement,
Arnaud LEF97

Bien sûr qu'il n'est pas pris en compte, puisqu'il est en float : donc il 'sort du flux'.

Regarde le lien que je t'ai donné plus haut, je pense que c'est une solution pour toi...

Bonjour,

Effectivement, j'y ai trouvé ma réponse.
J'ai ajouté un div vers la classe "Spacer" avant la fin de mon div container et cela fonctionne.

Le code du div "Spacer" est le suivant:

Code:

---

1 2 3

.spacer { clear: both; }

---

Je vais me renseigner sur cette fonction, vraiment pratique.

Merci encore !

Arnaud LEF97