[débutant] problème de mise en page

**SPACHFR** · 31/03/2009, 18h23

Bonjour,

J'essaie de réaliser une page relativement simple (enfin jusqu'ici je croyais),
avec :
un bandeau en haut
une partie gauche pour un éventuel menu
une partie droite pour l'affichage de données
un footer

J'ai suivi un exemple trouvé dans un tutotiel en essayant d'apporter des modifications afin que l'ensemble des div occupent toute la page de navigation.
Depuis j'ai 2 problèmes

1) La valeur height n'est pas respecté, j'ai de tout petites zones pour le menu et données.

2) j'ai systématiquement un cadre blanc autour du conteneur.

Dans l'ensemble des modifications que j'ai testés, j'ai ajouté un DOCTYPE, mais pas mieux.

Voici le code

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<STYLE type="text/css">
#conteneur {
width:100%;
height: 100%;
 background:yellow;
 }
#header {
width:100%;
height: 7%;
 margin:0 auto;
background-color:grey;
}
#wrap {
overflow:hidden;
background-color:BLUE;
}
#sidebar {
float:left; 
width:200px;
height:88%;
background-color:red;
}
#contenu {
margin-left:200px;
height:88%;
background-color:orange;
}
#footer {
width:100%;
height: 5%;
 margin:0 auto;
background-color:green;
 
}
</style>
</head>
<body>
<div id="conteneur">
	<div id="header">
		 Ceci est mon haut de page -->
	</div>
	<div id="wrap">
 
		<div id="sidebar">
			Ceci est ma colonne latérale -->
		</div>
		<div id="contenu">
			Ceci est mon contenu principal -->
		</div>
	</div>
	<div id="footer">
		Ceci est mon pied de page -->
	</div>
</div>
</body>
</html>

Malgré les tutoriaux, je n'arrive pas à faire cette mise en page...
Pourriez vous me dire là ou je me trompe ?

Merci

**GihefBey** · 31/03/2009, 20h49

Bonjour,

Ce que tu cherches à faire ne peut pas se faire comme ça.
C'est plus compliqué.

Essaye quand même

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
  <title>Un titre</title>
  <style type="text/css">
  html, body {
    height: 100%; /* pour que tes height soient prise en compte */
  /* pour enlever les marges, ce que tu appelles des bordures */
    margin : 0;
    padding : 0;
    }
 
et la suite

et cherche où il manque encore une hauteur à un bloc englobant les autres.
Et pourquoi tes hauteurs actuelles deviennent insuffisantes.

N'utilise pas de majuscules dans les noms des balises ni dans les noms des couleurs.
Les width: 100%; sont inutiles.
Les height en % sont changeantes. Modifie la taille de la fenêtre de ton navigateur pour voir.
"contenu" fait un peu péquenot au milieu de tous ces blocs en anglais (-;

-

**SPACHFR** · 01/04/2009, 09h55

Merci pour toutes ces remarques pertinentes.
Après en avoir tenu compte j'obtiens le résultat voulue.
J'ai changé le coté péquenot de "contenu" par "data"

Voici mon code modifié

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
  <title>Un titre</title>
  <style type="text/css">
  html, body {
    height: 100%; 
    margin : 0;
    padding : 0;
    }
 
#conteneur {
height: 100%;
 background:yellow;
 }
#header {
height: 7%;
 margin:0 auto;
background-color:grey;
}
#wrap {
overflow:hidden;
height:88%;
background-color:blue;
}
#sidebar {
float:left; 
width:200px;
height:100%;
background-color:red;
}
#data {
margin-left:200px;
height:100%;
background-color:orange;
}
#footer {
height: 5%;
 margin:0 auto;
background-color:green;
 
}
</style>
</head>
<body>
<div id="conteneur">
	<div id="header">
		 Ceci est mon haut de page -->
	</div>
	<div id="wrap">
 
		<div id="sidebar">
			Ceci est ma colonne latérale -->
		</div>
		<div id="data">
			Ceci est mon contenu principal -->
		</div>
	</div>
	<div id="footer">
		Ceci est mon pied de page -->
	</div>
</div>
</body>
</html>

Reste les valeurs de "height" en %, mais je ne vois vraiment pas comment faire autrement pour de multiples résolutions d'écrans différentes.