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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : 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
#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 !