Discussion :

[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 :

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 !

[franck31]

Bonjour, moi je fais comme cela:

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
 
<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 !

[Invité]

Bonjour,

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
<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 :

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
 
<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>