Discussion :

[maysa]

bonjour tout le monde !

voici mon problème : je voudrais mettre dans un div, une image et à coté de celle ci du texte. Mais pas n'importe où.
La première ligne de texte doit se trouver au même niveau que le haut de l'image,
la seconde au milieu
et la troisième alignée au bas de l'image,

J'ai positionné mon image en float left.

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
 
.contenuBlocGrandeJacquette{
overflow: hidden; /* POUR QUE LA JACQUETTE NE SORTE PAS DU CONTENU*/
float: 	left;
width: 50%;
height: 100%;
margin-top:5px;
}
 
/*image*/
.GrandeJacquette{
 
		float : 			left;
		margin-top : 		    5px;
		margin-left : 		     3px;
		margin-right:		     0px;
		margin-bottom:		  10px;
		margin-top:		    0px;
		border:			     #333333 1px solid;
		width:			     auto;
 
}
/*un div pour afficher le texte */
 
.contenuPrixTitreGrandeJacquette {
 
		float:				left;
		padding-right:		    0px;
		width:			      90px;
		height:			      80px;
}
 
h1.titre  {
width:			100%;
color:			black;
font-weight:	    500;
font-size:	     12px;
text-align:	     left;
margin-top: 	   0px;
 
}
/* prix */
h2.prix {
 
margin-top:				-10px;
color:					red;
font-size:				12px;
text-align:				left;
 
}

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div class="contenuBlocGrandeJacquette">
	<div class="GrandeJacquette">{$aMeilleuresVentes[0]->getJaquetteLink(50)}</div>
					<!-- fin div contenuPrixTitre -->
					<div class="contenuPrixTitreGrandeJacquette">
						<h1 class="titre">titre <a href="lien.php"</a></h1>
						<h2 class="prix">15 €</h2>	
						<span class="btnAjouter"><a href='lien.php'><img src='images/acheter_blanc.gif' border='0' alt="Acheter "></a></span>
</div><!-- fin div contenuPrixTitre -->
           	</div>

Le soucis c'est que le texte s'aligne en fonction du texte précédent. Suis obligé de le positionner en position absolue pour qu'il se place à l'endroit que je désire ?
Merci d'avance

[franculo_caoulene]

Salut,

Il n'y a pas moyen, à ma connaissance, d'effectuer ce que tu désires en pur CSS. Sauf si tout est toujours de la même dimension (une simple définition des marges devrait suffire). Il faudrait donc te tourner vers javascript en aval ou un script coté serveur en amont.

[maysa]

Merci,

Hélas non, le titre peut tenir sur deux lignes... donc ça va etre chaud !
Merci en tout cas.

[franculo_caoulene]

Si ton image a toujours la même taille. Tu peux regarder du coté du positionnement absolu peut-être. Tu mets ton image et tes textes dans un conteneur, puis tu positionnes.

[maysa]

oui elle aura toujours la meme taille cette image.Je vais tester cela !
merci