Menu div Float:left

Version imprimable

29/10/2007, 14h03
Mathelec

Menu div Float:left

Bonjour,

Alors voila j'ai fais mon design en div.

Un div pour le menu et un div pour le contenu et un dernier div pour le footer sous le div.
Alors pour mon div menu j'ai mis un float:left + width 180px, pour mon contenu et mon footer j'ai mis un margin-left:200px.
Donc tout va bien sous Firefox (logique :p) sous IE7 c'est toujours aussi bien mais arrivé sous IE6 c'est une catastrophe, mon contenu se place sous le menu mais toujours avec mon margin-left:200px.
Après quelque recherche j'ai mis un display:inline-block à mon contenu+footer et tout est bon sauf sous Firefox qui me sort une erreur dans la console d'erreur de Firefox.

Donc je voudrais virer ce inline-block tout en réglant le problème du contenu qui se décale en bas sous IE6.

Je vous remercie par avance.
A+

Mon CSS:

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
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
{
    width: 800px;
 
    margin: 10px auto;
 
    background: #F4F4F4 url(images/misc/fond.png) repeat top left;
    color: black;
 
    font: 10pt Tahoma, Verdana, 'Times New Roman', Times, serif;
}
 
#header
{
    width: 800px;
    height: 150px;
 
    background: url(images/header/header.png) no-repeat top left;
 
    margin-bottom: 10px;
}
 
#menu
{
    float: left;
    width: 180px;
}
.menu
{
    padding: 10px;
 
    color: #343436;
    background-color: #FFFFFF;
 
    border: 1px solid #67676D;
}
 
#body
{
    margin-left: 200px;
}
 
#footer
{
    margin-left: 200px;
 
    padding: 10px;
 
    text-align: center;
    color: #343436;
    background-color: #FFFFFF;
 
    border: 1px solid #67676D;
}
 
.contenu
{
    padding: 10px;
 
    color: #343436;
    background-color: #FFFFFF;
 
    border: 1px solid #67676D;
}
 
.spacer { height: 10px; }

Le HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<div id="header"></div>
 
<div id="menu">
  <div class="menu">Liens menu</div>
  <div class="spacer"></div>
  <div class="menu">Liens menu</div>
</div>
 
<div id="body">
  <div class="contenu">contenu</div>
  <div class="spacer"></div>
  <div class="contenu">contenu</div>
</div>
 
<div class="spacer"></div>
<div id="footer">Le footer</div>

29/10/2007, 14h53
Guiber

Ca fonctionne mieux en enlevant les float: left; de #body et #footer et en remettant le margin-left non ?

Et au passage, ça fonctionne pas sous IE6 de donner une width au tag body.
Tu ferais mieux de créer un div qui englobe tout ce qu'il y a dans le body et auquel tu donneras ta width de 800px.
29/10/2007, 14h57
Mathelec

Voilà, j'ai corrigé le code (désolé c'était une connaissance m'ayant conseillé comme ça)
Donc j'ai édité, c'est mon code actuel. (Pour le width sur le body je le ferais une fois le problème du float corrigé.
29/10/2007, 18h05
Mathelec

Quelqu'un saurait-il comment régler ce bug sous ie 6 ?