Discussion :

[tyn0r]

Bonjour, voila, en fait un probleme ce pose a moi ! je voudrais savoir si il est possible dans une seul class de mettre plusieur background-image ?
Je m'explique, j'ai donc : btg.png (top) bmg.png (milieu qui ce repete) et bbg.png (foot),
qui donne :







et j'ai donc fais plusieur div pour quel s'affiche correctement, mais le probleme c'est que le texte qui est dessus doit s'afficher sur la top et la milieu (commencer sur la top et le milieu s'agrandi si il ya besoin), et donc je vois pas comment faire ...

donc en fait, un premier probleme ce pose a moi, avec cette solution, les images en arriere plan ne s'affiche meme pas ... et la je vois pas pourquoi ... :

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
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
/* Bloc Nouveaute
-------------------------------------------------------- */
.blocnouveau {
	float: right;
	width: 150px;
	margin: 0;
	margin: 0;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 0px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 2px;
/*	background-color: #0066CC;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #12335b;
	border-right-width: 3px;
	border-right-style: solid;
	border-right-color: #12335b;
	border-left-width: 3px;
	border-left-style: solid;
	border-left-color: #12335b;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #12335b; */
}
 
 
.produitPetitnouveau {
	float: left;
	width: 150px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
}
 
#imageprodnouveau {
	float: left;
	margin-left: 0px;
}
 
.contourImagenouveau {
	border: 1px solid #12335b;
	margin-bottom: 0px;
	float: left;
}
 
 
.titreProduitnouveau {
	color: #12335B;
	text-align: center;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 100%;
}
 
.chapoProduitnouveau {
	color: #12335B;
	text-align: left;
	font-style: italic;
	font-size: 0.9em;
	line-height: 1.2em;
	margin-bottom: 5px;
	width: 100%;
}
 
.prixProduitnouveau {
	font-size: 14px;
	color: #a9c9e9;
	text-align: right;
	font-weight: bold;
	margin-top: 5px;
}
 
a.LIEN_commandernouveau:link {
	font-size: 12px;
	color: #a9c9e9;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
}
 
a.LIEN_commandernouveau:visited {
	font-size: 12px;
	color: #a9c9e9;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
}
 
a.LIEN_commandernouveau:hover {
	font-size: 12px;
	color: #a9c9e9;
	text-align: center;
	text-decoration: underline;
	font-weight: bold;
 
/* fond des bloc gauche
----------------------------------------------------------*/
.btg {
	float: left;
	padding: 0;
	color: #000000;
	background-image: url(images/btg.gif);
	background-repeat: no-repeat;
	height: 93px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
 
.bmg {
	float: left;
	margin: 0;
	padding: 0;
	width: 150px;
	color: #000000;
	background-image: url(images/bmg.png);
	background-repeat: repeat-y;
}
 
.bbg {
	float: left;
	color: #000000;
	padding: 0;
	margin-bottom: 0;
	margin-left: 0;
	width: 150px;
	background-image: url(images/bbg.png);
	background-repeat: no-repeat;
	height: 66px;
}

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
23
24
25
26
27
 
	<div class="btg">
		<div class="bmg">
			<div class="blocnouveau">
				<THELIA_PROD type="PRODUIT" nouveaute="1" aleatoire="1" classement="inverse" num="1">
				<div class="produitPetitnouveau">
					<div class="titreProduitnouveau">					
						<h3><a href="#REWRITEURL">#TITRE</a></h3>
					</div>
					<a href="#REWRITEURL">
					<THELIA_IMAGE type="IMAGE" num="1" produit="#ID"  largeur="145">
					<img src="#IMAGE"  alt="#PRODTITRE  " title="#PRODTITRE  " border="0" class="contourImagenouveau" />
					</THELIA_IMAGE>
					</a>
					<div class="chapoProduitnouveau">
						#CHAPO
					</div>
					<div class="prixProduitnouveau">
						• #PRIX &euro;
					</div>
					<a href="panier.php?action=ajouter&amp;ref=#REF" class="LIEN_commandernouveau">Ajouter au panier</a>	
				</div> 
				</THELIA_PROD>
			</div>
		</div>
	</div>
	<div class="bbg"></div>

donc, la les images ne s'affiche meme pas ... en gros, il faudrait que :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
					<div class="titreProduitnouveau">					
						<h3><a href="#REWRITEURL">#TITRE</a></h3>
					</div>

S'affiche sur btg.png (et si le titre est trop long qu'il deborde automatiquement sur bmg.png ...

Je suis vraiment bloqué ... je vous en pris, mettez moi au moin sur la bonne voie !

Merci d'avance.

Cordialement,
Romain Fluttaz <r.fluttaz@gmail.com>
Site en dev : www.produitsdesavoie.com (sous thelia ==> www.thelia.fr)

[kaiser59]

Salut,

C'est simple la réponse est non
Une image par classe, par id etc...

++

[jiraya sama]

tu peux toujours remettre un div par au dessus avec un position absolute ou relative mais c'est pas très propre à mon gout.

[dream_of_australia]

Tu pourrais couper ton top et ton foot qui sont quand même assez hauts, et n'écrire que sur le milieu en faisant un background-repeat.
En clair :
_ balise img avec ton top
_ en-dessous un div avec en background ton milieu
_ en-dessous une balise img avec ton foot
J'espère que ça t'aidera !

Quand je dis couper tes images c'est ne garder que la hauteur nécessaire pour ta petite maison pour le top, et ton arrondi pour le foot.

[tyn0r]

Tu pourrais couper ton top et ton foot qui sont quand même assez hauts, et n'écrire que sur le milieu en faisant un background-repeat.
En clair :
_ balise img avec ton top
_ en-dessous un div avec en background ton milieu
_ en-dessous une balise img avec ton foot
J'espère que ça t'aidera !

Quand je dis couper tes images c'est ne garder que la hauteur nécessaire pour ta petite maison pour le top, et ton arrondi pour le foot.

Merci bien, ca marche nickel !