Discussion :

[carreau]

bonjour,

Malgré la lecture des (excellents ) tutoriels, je rencontre un soucis de conception de mise en page par CSS.

J'ai un site "ancienne mode" avec des tableaux pour positionner tous mes éléments
et je souhaite faire évoluer sa structure vers quelque chose de plus moderne.
J'ai donc un travail de migration.
Je cherche donc à créer une mise en page structurée avec des conteneurs et blocs <div> dans lesquels je positionnerai dans un premier temps des tableaux HTML comme des objets.

Mais, n'ayant pas tout compris aux CSS, j'aurais besoin d'aide et de conseils.
Ce que je souhaiterais obtenir - en fichier joint Pièce jointe 51058 -
et ce à quoi j'arrive pour l'instant - en fichier joint Pièce jointe 51059.

La structure générale de ma mise en page est la suivante :
Un menu à gauche de largeur fixe et de hauteur fluide avec une entête et un pied fixes et de hauteur connue, encadrant le menu proprement dit qui s'adapte à la zone restante (avec barre de défilement si nécessaire)
Un contenu a droite qui occupe le reste de l'écran avec une entête et un pied de page propres de hauteur minimale et de largeur fluide et un contenu fluide (avec barre de défilement si nécessaire) qui occupe le reste d'espace disponible jusqu'au bord droit de l'écran.
Je rencontre deux soucis : Je n'arrive pas à limiter les blocs pour qu'ils ne débordent pas sur/sous le pied de page, je n'arrive pas à limiter le conteneur à la place restante de la taille de l'écran.

Voici le code de la feuille de style CSS telle qu'elle existe

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
/* CSS Document */
div{
	text-align:center;
	border:1px solid #287CB1;
}
 
html, body{
  margin:0;
  padding:0;
  height:100%;
	width:100%;
	background-color:#FFFFFF;
}
 
div#wrap {
	margin:0 auto;	
	height:100%; 
	width:100%; /* 100 % en hauteur */
}
 
div#menuwrap{
  position:absolute;
  width:240px;  
  height:100%;
	background-color:#999999;
}
 
div#menuup{
	height:120px;
	background-color:#66CC33;
	}
 
div#menudown{
	position:absolute;
	width:100%;
	height:120px;
	bottom:0;
	background-color:#CC99CC;
	}
 
div#menu{
	background-color:#FF6699;
}
 
div#contentwrap{
	margin-left:240px;
	height:100%;
	background-color:#cccccc;
}
 
#header{
	position:absolute;
	top:0;
	width:inherit;
	height:60px;
	background-color:#00CCFF;
}
 
#content{
	position:absolute;
	top:60px;
	background-color:#FFCC00;
}
 
#footer{
	position:absolute;
	bottom:0;
	height:60px;
	background-color:#33FF99;
}

Merci d'avance pour vos explications et suggestions

[Doki95]

Salut,

Sur le header, le content et le footer essaye en enlevant le position: absolute;.

[carreau]

merci pour ta suggestion, elle résout tous mes problèmes

à toute fin d'une réutilisation,
voici le code CSS correspondant

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
/* CSS Document */
div{
	text-align:center;
	border:1px solid #287CB1;
}
 
/* unités possibles sont 
in (pouce), 
cm, 
mm, 
pt (point, 1/72 pouce), 
pc (pica, 12 points). 
em et ex, qui dépendent de la police active, et surtout de sa taille ; 
em est plutôt à utiliser pour les longueurs horizontales
ex pour les longueurs verticales ; 
ce sont de bonnes unités pour les espaces entre les lignes de texte par exemple. 
px, qui désigne un pixel à l'écran. */
 
html, body{
  margin:0;
  padding:0;
  height:100%;
	width:100%;
	background-color:#FFFFFF;
/*	background:url(blank.gif) fixed; essai pour IE6 */
 
}
 
div#wrap {
	margin:0 auto;	
	height:100%; 
	width:100%;
}
 
html>body #wrap { /* sélecteur d'enfant : body est un enfant d'html  html>body non compris par MSIE */
}
 
div#menuwrap{ /* # correspondance par id et non par class */
	position:absolute; /* sorti du flux & positionnement par rapport au conteneur */
	left:0px;
  width:240px;  
  height:100%;
	background-color:#999999;
}
 
html>body #menuwrap{
}
 
div#menuup{
	height:120px;
	background-color:#66CC33;
	}
 
html>body #menuup{
}
 
div#menudown{
	position:absolute; /* sorti du flux & positionnement par rapport au conteneur */
	width:100%;
	height:120px;
	top:480px;
	left:0px;
	background-color:#CC99CC;
	}
 
html>body #menudown{
}
 
div#menu{
  height:360px;
	overflow-x:hidden;
	overflow-y:auto;
	background-color:#FF6699;
}
 
html->body #menu{
}
 
div#contentwrap{
	margin-left:240px;
	height:100%;
	background-color:#cccccc;
}
 
html>body #contentwrap{
}
 
#header{
	top:0;
	width:inherit;
	min-height:60px;
	background-color:#00CCFF;
}
 
html>body #header{
}
 
#content{
	top:60px;
	background-color:#FFCC00;
}
 
#footer{
	bottom:0;
	height:60px;
	background-color:#33FF99;
}
 
html>body #footer{
}

et le code 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
 
<head>
 
<title>positionnement CSS</title>
<meta name="Author" content="Jérôme Carreau" />
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
  <body>
			<div id="wrap">
				<div id="menuwrap">
					<div id="menuup">Menu haut Logo</div>
					<div id="menu">Le menu vertical Javascript 
					menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu 
					menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu 
					menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu 
					menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu 
					menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu finmenu</div>
					<div id="menudown">Menu bas Adresses</div>
				</div>
				<div id="contentwrap">
					<div id="header">Le menu horizontal
					entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete
					entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete
					entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete
					entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete
					entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete
					entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete entete finentete </div>
					<div id="content">Le corps html
					contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu 
					contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu 
					contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu 
					contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu 
					contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu 
					contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu 
					contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu 
					contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu 
					contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu 
					contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu 
					contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu fincontenu </div>
					<div id="footer">Le bas de page
					pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page
					pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page 
					pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page 
					pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page pied de page finpied de page </div>
				</div>
			</div>
  </body>
</html>

et enfin les captures d'écran du résultat sous IE5
Pièce jointe 51305

Opera9
Pièce jointe 51306

et Firefox3
Pièce jointe 51307

restera à gérer le débordement du bloc du menu horizontal sur le bloc du contenu, mais c'est un autre problème