Discussion :

[LEF97]

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

[sebhm]

Bonjour,

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

[LEF97]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[sebhm]

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...

[LEF97]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.spacer {
  clear: both;
}

Je vais me renseigner sur cette fonction, vraiment pratique.

Merci encore !

Arnaud LEF97