Discussion :

[calogerogigante]

Bonjour,

J'ai un soucis avec lequel je me bats depuis ce matin, pas moyen de trouver la solution.

J'ai un menu vertical à gauche, et un menu d'images à droite :
Cela donne ceci :

http://www.gigante.be/monprobleme/
Style : http://www.gigante.be/monprobleme/style.css



Sous IE6, cela s'affiche très bien, mais sous FireFox non : les deux pans latéraux descendent plus bas que le contenu de la page centrale (quand ce contenu est bref.)

Or, moi je voudrais que la couleur blanche du pan central descendent jusqu'au bas du plus grand des menus latéraux : le menu d'images.

Si quelqu'un voit ce qui cloche ?
Ca fait des heures que je tape des "clear" dans tous les sens : toujours le même problème sous FireFox !!

[calogerogigante]

Je me suis encore creusé la tête hier soir...
J'essaie de synthétiser.

Si je regarde le "corps" du fichier XHTML, j'ai :

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
...
 
<div id="main">
 
  <div id="head">
  </div>
 
  <div id="menu">
  </div>
 
  <div id="sidegallery">
  </div>
 
  <div id="content">
  </div>
 
</div>
 
<div id="foot">
</div>
 
...

Si je regarde mon fichier css dans l'essentiel :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
body
{
margin: 10px;
}
 
body div
{
text-align: left;
}
 
#head
{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
text-align: left;
height: 146px;
width: 780px;
background-image: url(head.jpg);
background-position: center;
background-repeat: no-repeat;
padding-top: 20px;
}
 
#main
{
width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
 
#menu
{
float: left;
clear: left;
width: 140px;
margin-bottom: 10px;
margin-left: 10px;
}
 
#sidegallery
{
float: right;
clear: right;
width: 130px;
text-align: left;
margin-bottom: 10px;
margin-right: 10px;
}
 
#content
{
padding: 5px;
margin-left: 160px;
margin-right: 160px;
margin-bottom: 10px;
width: 460px;
}
 
#foot
{
text-align: center;
color: #676767;
font-size: 12px;
clear: both;
}

Pourquoi diable FireFox me sort-il le bas de mes menus en dehors du block "main" ?

D'avance merci à la personne qui m'aidera à sortir de cette impasse...

[calogerogigante]

Je ne sais plus quoi faire, les amis... J'ai tout testé !!!


Je tiens absolument à garder ce template qui plait aux responsables du Musée du Jouet, et en même temps, je tiens à ce que l'affichage sous FireFox soit correct...

Vraiment personne n'a une idée de ce qui pourrait poser ce problème d'affichage sous FF ?

[Candygirl]

C'est parce que le contenu des flottants ne s'écoule pas dans le flux principal et ne sont donc pas pris en compte par ton conteneur.

Pour faire descendre ton conteneur jusqu'au bas des flottants, je te propose 2 solutions:

- remonter ton footer dans ton main, lui attribuer la couleur de fond. Son clear fera descendre le conteneur jusqu'en bas.

- établir un nouveau contexte de formatage, par exemple avec un ovrflow:hidden.

[calogerogigante]

Super !!! Merci beaucoup Candygirl...



Remonter le footer dans le main a résolu le problème !!
C'est tous les gosses du musée du jouet de Bruxelles qui te remercient...

Quand tu parles d'ajouter un overflow:hidden, à quel élément exactement me conseilles-tu d'ajouter cette valeur ?

[Candygirl]

Quand tu parles d'ajouter un overflow:hidden, à quel élément exactement me conseilles-tu d'ajouter cette valeur ?

Au #main. Maintenant je préfère perso la solution que tu as adoptée parce que tu utilises la propriété prévue à cet effet: le clear.

Maintant, en l'état actuel avec css2.1, il n'est pas toujours possible de l'affecter à un élément de la page. On peut alors jouer avec les nouveau contexte de formatage et les propriétés qui en crèe un.

Le "problème" c'est que tu utilises alors une propriété, non pas pour son rôle originel, mais pour l'effet qu'elle induit...

Le cas devrait être résolu plus facilement et accadémiquement dans le futur avec css3 et la propriété clear-after

[calogerogigante]

Aaah ! OK.

Benh moi, je reste donc avec cette solution impeccable du #foot remonté dans le #main.

Encore mille mercis pour ton coup de pouce, et vivement le CSS 3.

Résultat final visible dans deux semaines (j'espère !!) ici :
http://www.museedujouet.eu