Disposition de DIV (pour remplacer les tableaux)

**Baldy** · 10/11/2008, 15h25

Bonjour

J'ai un petit soucis avec un nouvel agencement de DIV que je voudrais faire :

Le header et le menu ne bouge pas. Pour le reste, j'ai pour le moment un bête tableau avec 3 cellules à gauche et une à droite qui a un rowspan=3. Mais je voudrais un scrool sur cette dernière. Donc obligé de passer aux DIV et là je ne sais pas trop comment agencer mon CSS.

Je voudrais les 3 DIV de gauche fixes et celle de droite fixe aussi mais avec un scrool, sachant qu'elles doivent prendre la hauteur max du div général.

Merci à vous.

**c_s_s** · 10/11/2008, 16h03

Bonjour,

Voici un exemple tout simple pour obtenir une telle structure.

Code css :

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
.content {
	width:800px;
	height:600px;
	margin:20px auto;
}
.header {
	width:800px;
	height:100px;
	background-color:#f1f1f1;
}	
.menu {
	float: left;
	width:200px;
	height:500px;
	background:#ddddff;
}
.contenu {
	float:left;
	width:600px;
	height:500px;	
}
.gauche {
	float: left;
	width:200px;
	height:500px;
}
.bloc1, .bloc2 {
	margin-bottom:10px;
}
.bloc1, .bloc2, .bloc3 {
	width:200px;
	height:160px;
	background:#ddffdd;
}
.droite {
	float: left;
	width:400px;
	height:500px;
	background:#ffffdd;
}
.blocscroll {
	width:400px;
	height:500px;
	overflow:auto;
	overflow-x : hidden;
}

Code html :

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
<div class="content">
	<div class="header">Header</div>
	<div class="menu">Menu</div>
	<div class="contenu">
		<div class="gauche">
			<div class="bloc1">Bloc 1</div>
			<div class="bloc2">Bloc 2</div>
			<div class="bloc3">Bloc 3</div>
		</div>
		<div class="droite">
			<div class="blocscroll">
			Scroll<br /><br /><br /><br /><br /><br /><br /><br /><br />
			Scroll<br /><br /><br /><br /><br /><br /><br /><br /><br />
			Scroll<br /><br /><br /><br /><br /><br /><br /><br /><br />
			Scroll<br /><br /><br /><br /><br /><br /><br /><br /><br />
			Scroll<br /><br /><br /><br /><br /><br /><br /><br /><br />
			Scroll<br /><br /><br /><br /><br /><br /><br /><br /><br />
			Scroll<br /><br /><br /><br /><br /><br /><br /><br /><br />
			</div>
		</div>
	</div>
 </div>

Testé sous Firefox 2 - IE6 - IE7 - Safari PC - Opera 9 - Google Chrome.

J'espère avoir bien compris ce que tu désirais.

**Baldy** · 10/11/2008, 16h56

Exactement ce qu'il me fallait, merci à toi

**mehdi_scofield** · 10/11/2008, 17h15

Bon apparement je suis légérement en retard,

voila ce que j'ai pu faire , le Css est en desssus du code vous pouvez faire la séparation :

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
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<style>
div{
border:1px #000000 solid;
}
 
#wrapper
{
	padding:5px;
	width:100%;
	height:relative;
}
 
#header
{
	height:100px;
	width:100%;
	margin-bottom:5px;
}
 
#menu
{
	height:100%;
	width:150px;
}
 
#content
{	
	float:right;
	height:97%;
	width:83%;
	padding:5px;
}
#fixScrol
{
	float:right;
	height:389px;
	width:562px;
	overflow:auto;
}
#fix1
{	
	float:right;
	height:125px;
	margin-bottom:5px;
	margin-left:5px;
	margin-right:5px;
	width:245px;
 
}
#fix2
{
	float:right;
	height:125px;
	margin-bottom:5px;
	margin-left:5px;
	margin-right:5px;
	width:245px;
}
#fix3
{
	float:right;
	height:125px;
	margin-bottom:5px;
	margin-left:5px;
	margin-right:5px;
	width:245px;	
}
 
</style>
 
<div id="wrapper" >
<div id="header" >
Header
 
<!--  La fin du header  -->
</div>
 
<div id="content">
	<div id="fixScrol">		
	fix avec scroll 
	<script type="text/javascript" >
	for(i=0;i<100;i++)
	document.write("Scroll ...<br>");
	document.write(" Et voila ...");
 
	</script>
	<!--  La fin du fixScrol  -->
	</div>
 
	<div id ="fix1">
	fix1
	</div>
	<div id ="fix2">
	fix2
	</div>
	<div id ="fix3">
	fix3
	</div>
 
 
 
<!--  La fin du content  -->
</div>
 
<div id="menu">
Menu
<!--  La fin du header  -->
</div>
 
 
<!--  La fin du Wrapper  -->
</div>
 
 
</body>
</html>

Disposition de DIV (pour remplacer les tableaux)

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager