Taille du menu et corps de page

**rteuteu55** · 20/04/2007, 12h10

bonjour à tous,

grâce aux cours donnés sur le site et quelques recherches sur internet j'ai pu construire pour premier site en css.

il y as juste une chose que j'arrivais à faire avec des <table> (oui mais les table c'est pas bien

) et que je n'arrive pas à refaire, c'est d'avoir mon menu aussi 'haut' que le corps de ma page.

en gros j'ai ce code :

le 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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 <body>
  <!-- ######### -->
  <div id="fond">
   <!-- ######### -->
   <div id="top">
        <object width="800" height="180" align="middle">
            <embed src="head.swf" quality="high" bgcolor="#ffffff" width="800" height="160" name="head" align="middle" />
        </object>
   </div>
   <!-- ######### -->
   <div id="menu">
        <div id="menuH">&nbsp;</div>
        <div class="lvl1"><a href="index.php"> Accueil</a></div>
        <div class="lvl1"><a href="index.php?page=1">1</a></div>
        <div class="lvl1"><a href="index.php?page=2">3</a></div>
        <div class="lvl1"><a href="index.php?page=test">test</a></div>
        <div id="menuB">&nbsp;</div>
   </div>
   <!-- ######### -->
   <div id="corp">
    <div id="corpH">&nbsp;</div>
    <div id="corpC">
    <?php
        if($_GET['page']) include($_GET['page'].".html");
        else include("index.php");
    ?>    
    </div>
    <div id="corpB">&nbsp;</div>        
   </div>
   <!-- ######### -->
   <div id="fin">
    fin
   </div>
  </div>
 </body>
</html>

et le 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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
html,body {
background-color : white; 
}
 
#fond {
background-color:transparent;
width:800px;
}
 
/* ===================================================== */
/* ====================== HEAD ========================= */
/* ===================================================== */
 
#top {
background-color:transparent;
margin:0;
padding:0;
text-align:justify;
width:800px;
height:auto;
}
 
/* ===================================================== */
/* ====================== MENU ========================= */
/* ===================================================== */
 
#menu {
display:block;
width:215px;
float:left;
background:url("img/menuC.png");
background-repeat:repeat-y;
}
 
#menuH {
width:215px;
height:41px;
padding:0;
background:url("img/menuH.png");
background-color:#FFFFFF;
background-repeat:no-repeat;
}
 
#menuB {
width:215px;
height:41px;
padding:0;
background:url("img/menuB.png");
background-color:#FFFFFF;
background-repeat:no-repeat;
}
 
.lvl1 a, .lvl1 a:active, .lvl1 a:visited {
font: bold 16px arial, serif;
text-decoration: none;
padding:6px 10px;
margin-left:7px;
background:url("img/MenuBtmOff.gif") no-repeat left top;
display:block;
color:#3366FF;
}
 
.lvl1 a:hover {
background:url("img/MenuBtmOn.gif") no-repeat;
color:#99CC66;
}
/* ===================================================== */
/* ====================== CORP ========================= */
/* ===================================================== */
 
#corp {
background-color:transparent;
text-align:justify;
width:585px;
float:right;
}
 
#corpH {
width:585px;
height:38px;
padding:0;
background:url("img/corpH.png");
background-color:#FFFFFF;
background-repeat:no-repeat;
}
 
#corpB {
width:585px;
height:38px;
padding:0;
background:url("img/corpB.png");
background-color:#FFFFFF;
background-repeat:no-repeat;
}
 
#ccorp {
width:585px;
padding:0;
background:url("img/corpC.png");
background-color:#FFFFFF;
background-repeat:repeat-y;
}
 
/* ===================================================== */
/* ====================== FIN  ========================= */
/* ===================================================== */
 
#fin {
background-color:transparent;
width:800px;
/*height:300px;*/
text-align:center;
}

mais les tailles de mon corps et de mon menu ne sont jamais égales ce qui m'embête un peut ...

voila tout.
Si quelqu'un as un solution à mon problème !

en attendant je retourne sur mon ami google (des fois qu'il trouve qu'autre info !!)

**kalyparker** · 20/04/2007, 12h47

Bonjour,

en regardant un peu ton code, j'ai réussi à aligner les 2 en enlevant du menu :

Code :

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

<div id="menuB">&nbsp;</div>

Je pense que c'est ça qui pose problème (j'ai pas l'image donc je ne peux pas être sûre), mais ça vaux le coup d'essayer

voili, voilou

**Tppppp** · 20/04/2007, 13h22

Salut,

si tu veux avoir ton menu aussi haut que ton corps utilise un margin dans ton css.

Par exemple si tu veux que ton menu et que ton corps soient à 20 pixels du haut de ta page tu met ceci dans ton css aux id #menu et #corp :

Code :

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

margin-top: 20px;

Si tu veux qu'ils soient à 20 pixels du bord gauche tu utilise (toujours dans ton css) :

Code :

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

margin-left: 20px;

Et ainsi de suite (margin-right pour la droite et margin-bottom à partir du bas)

**rteuteu55** · 20/04/2007, 13h33

Bonjour kalyparker et merci de ta réponse,

mais quand je supprime id="menuB" cela vire mon image (vu que je n'ai plus la mise en page défini dans le CSS) mais ne corrige pas mon problème.

Je cherche à avoir les 2 conteneurs "menu" & "corp" de même taille.
La solution de donner une taille fixe ne passe pas puisque le tailles change suivant les pages affichés.

avec les balises table ça aurais donné :

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
 
<table width="100%" height="402" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="20%" height="32">&nbsp;</td>
    <td width="80%">&nbsp;</td>
  </tr>
  <tr>
    <td>Menu ici</td>
    <td>Corp ici</td>
  </tr>
  <tr>
    <td height="32">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

(enfin je donne ça de tête mais ça dois marcher).

edit : je regarde ce que ça donne avec les margin !

Edit2 : j'ai mis en schéma mon problème !

**rteuteu55** · 20/04/2007, 14h22

bon j'ai regardé pour les 'margin' mais ça me plante toute ma mise en page

...

**Tppppp** · 20/04/2007, 15h17

Pourtant le margin m'a l'air d'être la seule solution.

Bon reprenons... L'image que tu attachée va m'aider à mieux t'expliquer les margins.

Dans ton css tu mets pour "menuH" et "corpH" la même valeur pour le margin.
Cela dépend bien évidement de la hauteur de ta bannière ou de ce qu'il y a en haut de ta page.
Par exemple si le "head" fait 180 pixels de hauteur tu mettra les margins de "menuH" et de "corpH" à 200 pixels (à toi de choisir l'espacement que tu souhaite entre ta bannière et "menuH" et "corpH". Avec cet exemple il est de 20px (200-180)).

Donc pour l'id #menuH et l'id #corpH ajoute :

Code :

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

margin-top: 200px;

Bon ensuite si tu veux situé le menuH un peu plus à droite tu peux utilisé :

Code :

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

margin-right: 10px;

Tu peux aussi utilisé margin-left ou margin-bottom.
C'est à toi d'ajuster ça.

Ensuite pour le "menuC" et le "corpC" ça dépend de la taille du "menuH" et de "corpH"
Si "menuH" ou "corpH" font 100px de hauteur tu donnes donc à "menuC" cette valeur là du margin :

Code :

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

margin-top: 320px;

Encore une fois c'est toi qui ajuste ces valeurs. Tout dépend si tu veux avoir de l'espacement entre tes menus.

Après pour le "menuB" et le "corpB" c'est pareil ça dépend de la taille de tes menus et corps précédents.

Voila j'espère que ces explications sont correctes. Si jamais il y a une ou plusieurs erreurs, corrigez-les

**kalyparker** · 20/04/2007, 15h25

Les margins peuvent t'aider pour la mise en page, mais pour faire en sorte que le menu fasse la même taille que le contenu, il y a une petite astuce.
Essaye ça :

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
  html,body {
background-color : white; 
}
 
#fond {
background-color:transparent;
width:800px;
}
 
/* ===================================================== */
/* ====================== HEAD ========================= */
/* ===================================================== */
 
#top {
background-color:black;
margin:0;
padding:0;
text-align:justify;
width:800px;
height:auto;
}
 
/* ===================================================== */
/* ====================== MENU ========================= */
/* ===================================================== */
 
#menu {
display:block;
width:215px;
float:left;
background:url("img/menuC.png");
background-repeat:repeat-y;
background-color:red;
}
 
#menuH {
width:215px;
height:41px;
padding:0;
background:url("img/menuH.png");
background-color:red;
background-repeat:no-repeat;
}
 
#menuB {
width:215px;
height:41px;
padding:0;
background:url("img/menuB.png");
background-color:red;
background-repeat:no-repeat;
}
 
.lvl1 a, .lvl1 a:active, .lvl1 a:visited {
font: bold 16px arial, serif;
text-decoration: none;
padding:6px 10px;
margin-left:7px;
background:url("img/MenuBtmOff.gif") no-repeat left top;
display:block;
color:#3366FF;
}
 
.lvl1 a:hover {
background:url("img/MenuBtmOn.gif") no-repeat;
color:#99CC66;
}
/* ===================================================== */
/* ====================== CORP ========================= */
/* ===================================================== */
 
#corp {
background-color:brown;
text-align:justify;
width:585px;
float:right;
height:100%;
}
 
#corpH {
width:585px;
height:38px;
padding:0;
background:url("img/corpH.png");
background-color:brown;
background-repeat:no-repeat;
}
 
#corpB {
width:585px;
height:38px;
padding:0;
background:url("img/corpB.png");
background-color:brown;
background-repeat:no-repeat;
}
 
#ccorp {
width:585px;
padding:0;
background:url("img/corpC.png");
background-color:brown;
background-repeat:repeat-y;
}
 
/* ===================================================== */
/* ====================== FIN  ========================= */
/* ===================================================== */
 
#fin {
background-color:black;
width:800px;
/*height:300px;*/
text-align:center;
}
#fincontenu {clear:both;}
#contenu {background-color:brown;width:100%;}
 
  </style>
  </head>
  <body>
<body>
  <!-- ######### -->
  <div id="fond">
   <!-- ######### -->
   <div id="top">
        <!--<object width="800" height="180" align="middle">
            <embed src="head.swf" quality="high" bgcolor="#ffffff" width="800" height="160" name="head" align="middle" />
        </object>-->
        <br />
   </div>
   <!-- ######### -->
   <div id="contenu">
     <div id="menu">
          <div id="menuH">&nbsp;</div>
          <div class="lvl1"><a href="index.php"> Accueil</a></div>
          <div class="lvl1"><a href="index.php?page=1">1</a></div>
          <div class="lvl1"><a href="index.php?page=2">3</a></div>
          <div class="lvl1"><a href="index.php?page=test">test</a></div>
          <div id="menuB">&nbsp;</div>
     </div>
     <!-- ######### -->
     <div id="corp">
      <div id="corpH">&nbsp;</div>
      <div id="corpC">
      <?php
          if($_GET['page']) include($_GET['page'].".html");
          else include("index.php");
      ?>    
      </div>
      <div id="corpB">&nbsp;</div>        
    <div id="fincontenu"></div>
    </div>
   </div>
   <!-- ######### -->
   <div id="fin">
    fin
   </div>
  </div>
 </body>
</html>

Désolé pour les couleurs, mais c'est les seules qui me sont passé par la tête

**rteuteu55** · 20/04/2007, 15h27

je vais tester ça. Je pense arriver à ne pas planter ma mise en page.

par contre, le problème persiste (je pense) pour les menuB & corpB en effet je ne peut pas mettre de valeurs fixe puisque menuC & corpC qui sont juste au dessus ont une taille variable !

Edit : La technique donné dans ton code kalyparker me parait foireuse mais peut marcher !!

Je vais tester ça !!

Taille du menu et corps de page

CSS

Vue hybride

Discussions similaires

Partager

Partager