Imbriquer des divs

[web-dev-2511]

Bonjour !!

Je suis ''malheureusement'' habitué à découper des sites internet en utilisant des Tableaux. Je suis en transition vers les DIVs !

J'aimerais faire quelque chose qui ressemble à l'image que j'ai jointe ...



Je n'y arrive tout simplement pas.

J'aimerais que la boite Texte soit extensible verticalement afin de faciliter l'ajout de textes. Donc, la boite LEFT B ainsi que RIGHT B devraient être en repeat .. Si ça fonctionne comme des tableaux ..

Voici mon code HTML

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<div class="wrapper-content" id="accueil-content">
    <div class="accueil-top">top</div>
    <div class="accueil-left-a">left-a</div>
    <div class="accueil-left-b">left-b</div>
    <div class="accueil-texte">
        <p>Ici du texte</p>
    </div>
    <div class="accueil-right-a">right-a</div>
 
    <div class="accueil-right-b">right-b</div>
	<div class="accueil-bottom">bottom</div>
</div>

Voici mon code CSS

Code css :

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
#accueil-content
{
	margin-top:0;
	position: relative;
}
 
/********** BOITE *************/
.accueil-top,
.accueil-left-a,
.accueil-texte,
.accueil-right-a,
.accueil-left-b,
.accueil-right-b,
.accueil-bottom
{
	position:relative;
}
 
.accueil-left-a,
.accueil-texte,
.accueil-right-a,
.accueil-left-b,
.accueil-right-b
{
	float:left;
}
 
.accueil-top
{
	background:url(../images/sections/accueil/accueil-top.jpg) 0 0 no-repeat;
	height:92px;
	width:883px;
}
 
.accueil-left-a
{
	background:url(../images/sections/accueil/accueil-left-a.jpg) 0 0 no-repeat;
	height: 67px;
	width: 127px;
}
 
.accueil-texte
{
	background:url(../images/sections/accueil/accueil-fond.jpg) 0 0 no-repeat;
	padding: 5px 20px;
	width: 631px;
}
 
.accueil-right-a
{
	background:url(../images/sections/accueil/accueil-right-a.jpg) 0 0 no-repeat;
	height: 67px;
	width: 85px;
}
 
.accueil-left-b
{
	background:url(../images/sections/accueil/accueil-repeat-y-left-b.jpg) 0 0 repeat-y;
	width: 125px;
	margin-top:68px;
}
 
.accueil-right-b
{
	background:url(../images/sections/accueil/accueil-repeat-y-right-b.jpg) 0 0 repeat-y;
	width: 125px;
}
 
.accueil-bottom
{
	background:url(../images/sections/accueil/accueil-bottom.jpg) 0 0 no-repeat;
	clear: left;
	height:120px;
	width: 883px;
}

** Je sais que j'aurais dû mettre des ID au lieu des CLASS mais j'ai mes raisons ... Le code plus loin.

Mercii !

[franck31]

Bonjour, moi je fais comme cela:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div class="accueil-top">top</div>
<div class="centre">
  <div class="cent-left">
    <div class="accueil-left-a">left-a</div>
    <div class="accueil-left-b">left-b</div>
  </div>
    <div class="accueil-texte">
        <p>Ici du texte</p>
    </div>
  <div class="cent-right">
    <div class="accueil-right-a">right-a</div>
 
    <div class="accueil-right-b">right-b</div>
  </div>
</div>

en fait tu fait un bloc qui prends left, centre et right et tu mets les left dans un bloc et les right dans un bloc.
Ensuite tu jou sur les blocs avec overflow:hidden; et clear:both; pour les utilisations des float.

[web-dev-2511]

Merci franck31 !

C'est tellement intelligent !

Je vais faire ça !

[jreaux62]

Bonjour,

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
#accueil-content 			{ width:100%; clear:both; margin:0 auto; }
 
#accueil-top 				{ width:880px; clear:both; height:92px; background:url(../images/sections/accueil/accueil-top.jpg) 0 0 no-repeat;}
 
#accueil-middle 			{ width:880px; clear:both; }
 
	#accueil-middle-left 	{ width:125px; float:left; }
		#accueil-left-a 	{ width:125px; height:67px; background:url(../images/sections/accueil/accueil-left-a.jpg) 0 0 no-repeat; }
		#accueil-left-b 	{ width:125px; background:url(../images/sections/accueil/accueil-repeat-y-left-b.jpg) 0 0 repeat-y; }
 
	#accueil-middle-center 	{ width:630px; float:left; }
		#accueil-texte 		{ width:630px; padding:5px 20px; background:url(../images/sections/accueil/accueil-fond.jpg) 0 0 no-repeat; }
 
	#accueil-middle-right 	{ width:125px; float:left; }
		#accueil-right-a 	{ width:125px; height:67px; background:url(../images/sections/accueil/accueil-right-a.jpg) 0 0 no-repeat; }
		#accueil-right-b 	{ width:125px; background:url(../images/sections/accueil/accueil-repeat-y-right-b.jpg) 0 0 repeat-y; }
 
#accueil-bottom 			{ width:880px; clear:both; height:120px; background:url(../images/sections/accueil/accueil-bottom.jpg) 0 0 no-repeat; }
</style>

Code :

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
 
<div id="accueil-content">
	<div id="accueil-top">
		top
	</div>
 
	<div id="accueil-middle">
 
		<div id="accueil-middle-left">
			<div id="accueil-left-a">left-a</div>
			<div id="accueil-left-b">left-b</div>
		</div>
 
		<div id="accueil-middle-center">
			<div id="accueil-texte">
				<p>Ici du texte</p>
			</div>
		</div>
 
		<div id="accueil-middle-right">
			<div id="accueil-right-a">right-a</div>
			<div id="accueil-right-b">right-b</div>
		</div>
 
	</div>
 
	<div id="accueil-bottom">
		bottom
	</div>
</div>