Discussion :

[dream_of_australia]

Bonjour tout le monde,

Ce que je voudrais faire est en pièce jointe.

Je n'arrive pas à intégrer correctement mon psd.

Les boxes se décomposent comme suit :
_ le haut avec le titre
_ le milieu : bordure de chaque côté en image sur toute la hauteur + background-image dégradée au milieu + background-color pour la hauteur qui reste au milieu
_ le bas

Elles sont extensibles en hauteur, d'où mon souci.
Les bordures ne vont pas jusqu'en bas.

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
.entireBoxLeft {
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:0px;
        width:213px;
}
.boxTitleLeft {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	color: #000000;
	height: 34px;
	font-weight: bold;
	text-align:center;
	line-height:34px;
        background-image: url(../styleImages/backgrounds/boxTitleBgLeft.gif);
	background-repeat: no-repeat;
	width: 213px;
}
.boxLeft {
	width:213px;
}
.clearboth{
	clear:both;
}
.boxBorderLeft, .boxBorderRight {
	margin:0;
	padding:0;
}
.boxBorderLeft {
	background-image: url(../styleImages/backgrounds/boxBorderLeft.gif);
	background-repeat: repeat-y;
	width: 1px;
	float:left;
	min-width:1px;
}
.boxBorderRight {
	background-image: url(../styleImages/backgrounds/boxBorderRight.gif);
	background-repeat: repeat-y;
	width: 2px;
	float:right;
	min-width:2px;
}
.boxContentLeft {
        background-color:#FAFAFA;
        background-image: url(../styleImages/backgrounds/boxBg.gif);
	background-repeat: repeat-x;
	margin:0;
	padding:0;
	float:left;
        width:210px;
}
.boxContent {
	width:80%;
	padding:10px;
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:11px;
}
.boxFootLeft {
	background-image: url(../styleImages/backgrounds/boxBottomBgLeft.gif);
	background-repeat: no-repeat;
	width: 213x;
	height:14px;
}

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
<div class="entireBoxLeft">
<div class="boxTitleLeft">TITLE</div>
<div class="boxLeft">
    <div class="boxBorderLeft"></div>
	<div class="boxContentLeft">
		<div class="boxContent">
			blablabla
		</div>
	</div>
	<div class="boxBorderRight"></div>
	<div class="clearboth"></div>
</div>
<div class="boxFootLeft"></div>
</div>

Est-ce que quelqu'un saurait pourquoi ?

[dream_of_australia]

Problème résolu en utilisant l'attribut border au lieu des background-images. C'est un peu moins joli mais tant pis.

Si quelqu'un a une autre solution à proposer je suis preneuse.