Discussion :

[renotm]

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 :

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

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 :

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



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)



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.

[vlunder]

Je pense que la couleur ne s'applique que sur l'arriere plan du texte
tu dois ajouter pour les P des padding-top et bottom.

[Bisûnûrs]

C'est à cause des marges par défaut des éléments dans les feuilles de style des navigateurs.

Rajoute :

Code :

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

1
2
3
4
* {
   margin:0;
   padding:0;
}

au début de ton CSS.