Elements blocks dans un DIV
Bonjour,
J'essaye désespérement de créer un petit template basé uniquement sur des CSS.
Mon Code n'est pas très compliqué. Un header.
Un block main qui contient un menu haut, un menu gauche , un contenu et un menu bas.
HTML
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div id="header">
</div>
<div id="mainContent">
<div id="menuHaut">
</div>
<div id="floatMenu">
</div>
<div id="content">
</div>
<br style="clear:both" />
<div id="footer">
</div>
</div> |
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
|
body, html {
margin:0px;
text-align:center;
background-color:#000;
font-family:Verdana;
font-size:0.9em;
}
#header {
width:700px;
height:80px;
margin-left:auto;
margin-right:auto;
background-color:#FF0000;
color:#FFFF00;
text-align:left;
padding-left:10px;
font-size:2em;
}
#mainContent {
width:700px;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
text-align:left;
padding-left:10px;
}
#menuHaut {
width:700px;
background-color:#00FF00;
}
#footer {
width:700px;
background-color:#FF00FF;
height:20px;
}
#floatMenu {
width:150px;
background-color:#00FFFF;
height:500px;
float:left;
}
#content {
width:550px;
background-color:#0000FF;
height:500px;
float:right;
} |
Jusque là tout va bien tout est bien positionné comme je le veux (les hauteurs et couleurs sont là pour la lisibilité)
ca donne ca (je sais c'est attroce :P)
http://mlike.free.fr/images/template_empty.png
Mais dès lors que je mets un élément block dans le menu haut (comme un li ou un p) j'ai deux marges qui se mettent de part et d'autre de ce dit menu
(une petite image sera plus parlante je pense)
http://mlike.free.fr/images/template_li.png
Je ne comprends pas trop pourquoi j'ai ce comportment. Etant donné que je l'ai sur tous les browsers (IE6, opéra, IE7, FF) je pense que je fais une erreur grossière mais je ne trouve pas laquelle.
Si qq'un a une idée :)
Merci.
