Blocs immobiles / diminue largeur navigateur

**Chavadam** · 29/12/2010, 12h15

Bonjour.
Je suis nouveau en CSS pour le design de pages avec des blocs, mais pas nouveau chez Developpez.com, que je trouve super.

Mon premier essai fonctionne mais ne me satisfait pas, du fait de quelques comportements non souhaités, notamment lorsque je diminue la largeur de la fenêtre de mon navigateur (Mozilla Firefox version 3.6.13).

Mon seul fichier .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
<!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" xml:lang="fr" >
	<head>
		<title>Essai CSS #1</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="Design.css" />
	</head>
	<body>
		<div id="wrapper">
			<div id="container_top">
				<div id="header-1">
					<h5>&nbsp;</h5>					
				</div>
				<div id="header-2">
					<h2 title="Explication">Bloc 2 - container_top</h2>
				</div>
				<div id="header-3">
					<h5>Bloc 3 - container_top</h5>
				</div>
				<div id="header-4">
					<h5>Bloc 4 - container_top</h5>					
				</div>
				<div id="header-5">
					<h5>&nbsp;</h5>					
				</div>
			</div>
			<div id="container_mid">
				<div id="side-left">
					Left
				</div>
				<div id="container_mid_mid">
					<div id="content-mid-up">
						Diaporama
					</div>
					<div id="content-mid-bottom">
						Sélection
					</div>
				</div>
				<div id="side-right">
					Right
				</div>
			</div>
			<div id="footer">
				<h6>GSM: +32|0 490 123 456 &nbsp;&Xi;&nbsp; email: adresse@email.be &nbsp;&Xi;&nbsp; </h6> <!-- -->
			</div>
		</div>
	</body>
</html>

Mon seul fichier .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
body {background-color: #002233;}
 
#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 100%;
	background: #775577;
	min-width: 600px;		/* Minimum width of layout - remove line if not required */
					/* The min-width property does not work in old versions of Internet Explorer */
	// font-size: 90%;
}
 
#container_top{
	margin: 90px 0 0 0;
	background: #112233;
	// display: inline-block;
}
 
#header-1 {
	float: left;
	width: 15%; // 185px;
	padding: 10px;
	background: #552233;
}
 
#header-2 {
	float: left;
	width: 240px;
	padding: 10px;
	background: #112233;
}
 
#header-3 {
	float: left;
	width: 270px;
	padding: 10px;
	background: #222233;
}
 
#header-4 {
	float: left;
	width: 258px;
	padding: 10px;
	background: #332233;
}
 
#header-5 {
	float: left;
	width: 15%; // 185px;
	padding: 10px;
	background: #442233;
}
 
#container_mid {
	margin: 0 0 0 0;
	background: #002233;
	// display: inline-block;
}
 
#side-left {
	float: left;
	width: 15%; // 185px;
	padding: 10px;
	background: #002233;
}
 
#container_mid_mid {
	float: left;
	width: 828px;
	background: #222233;
	display: inline-block;
}
 
#content-mid-up { 
	float: left;
	width: 828px;
	height: 400px;
	background: #113355;
	vertical-align: middle;
}
 
#content-mid-bottom { 
	float: left;
	width: 828px;
	height: 50px;
	background: #223355;
	vertical-align: bottom;
}
 
#side-right {
	float: left;
	width: 15%; // 185px;
	padding: 10px;
	background: #002233;
}
 
#footer {
	clear: both;
	background: #002233;
	padding: 10px;
}
 
h1, h2, h3, h4, h5, h6 {color: #446688;}
h1 {margin-left : 0cm ; margin-top : 0pt ; margin-bottom : 0pt}
h2 {margin-left : 0cm ; margin-top : 1pt ; margin-bottom : 0pt}
h5 {margin-left : 0cm ; font-variant : normal ; font-family : Verdana, sans-serif ; margin-top : 10pt ; margin-bottom : 0pt;}
h6 {margin-left : 0cm ; font-variant : normal ; font-family : Verdana, sans-serif ; margin-top : 4pt ; margin-bottom : 0pt;}

Ma question : Comment faire pour que, lorsque l'utilisateur diminue la largeur de son browser, les colonnes de gauche et de droite diminuent de manière égale, mais pas la colonne centrale.
- Colonne de gauche = #header-1 dans #container_top + #side-left dans #container_mid .
- Colonne de droite = #header-5 dans #container_top + #side-right dans #container_mid .
- Colonne centrale = #header-2 à #header-4 dans #container_top + #container_mid_mid dans #container_mid .
Même quand les colonnes latérales ont disparu, du fait de la diminution de la largeur de la fenêtre du navigateur, la colonne centrale ne doit pas rapetir.
Et comment éviter que les blocs 'header-n' s'empilent verticalement lorsque la largeur du navigateur est diminuée. Il faut qu'ils restent en une ligne, quitte à ne pas être affichés.

N'attribuez pas d'attention aux couleurs de fond de blocs choisies; dans le projet final, tous les blocs auront une même couleur. Ce n'est que pour mieux distinguer ce qui se passe, en phase de développement.
Seuls des blocs div header-2 à header-5 contiendront un peu de texte.

Cette question intéresse beaucoup de concepteurs CSS, n'est-ce pas ?
Tout conseil et critique positive est bienvenu.
Merci à toute âme empathique.
Bonne année 2011.

**Marc22** · 29/12/2010, 18h18

Bonsoir,

à mon avis il faut utiliser des pourcentages pour les parties qui doivent varier au gré de l'utilisateur, et utiliser une partie fixe pour la partie centrale. Ça ne doit pas être plus compliqué je pense.

Blocs immobiles / diminue largeur navigateur

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager