[Résolu] Comment placer une image en fonction de la taille d'une autr

Bonjour tout le monde,
j'ai un soucis et ne sait ni comment le résoudre, ni comment l'expliquer alors je vous met tout ca en image :

ce que je souhaite faire :


et voilà jusqu'où j'arrive à aller :


Je vous mets aussi mon code html :

<div class="ContentBloc">
	<div class="ContentBlocImg">
		<img src="images/ContentImg02.jpg" alt="" title="" class="ContentImg" />
		<a href=""><img src="images/ContentImgView.jpg" alt="view" title="view" class="ContentImgView" /></a>
	</div>
	<p><img src="images/ContentIconImg.jpg" />IMG01276.jpg</p>
</div>

et ma css :

.ContentBloc {
	float: left;
	width: 200px;
	height: 242px;
	border: 1px solid #ccc;
	margin: 15px 10px 0 0;
	position: relative;
	}
.ContentBlocImg {
	text-align: center;
	margin: 10px 0 0 0;
	}
.ContentImg {
	border: 1px solid #000;
	}
.ContentImgView {
	position: absolute;
	left: 0;
	}
.ContentBloc p {
	text-align: center;
	font-weight: bold;
	color: #333;
	margin: 10px 0 0 0;
	}

Voilà, j'essaie de placer la petite loupe sur l'image dans le coin en bas à gauche et qu'elle s'affiche toujours dans ce coin peut importe la taille de l'image en dessous. Si vous pouviez m'aider, c'est sympa, merci.
Modifié par Alore (22 Jan 2008 - 23:59)

Bonsoir,

Rapidement car il se fait tard: on utilisera à priori le positionnement absolu pour placer l'image de la loupe. On aura un code HTML de ce type:

<span class="image">
	<img alt="" class="vignette" src="vignette.jpg" />
	<img alt="" class="view" src="loupe.png" />
</span>

(note en passant: au final, les attributs alt ne seront peut-être pas ou sans doute pas vides, mais je simplifie ici pour me concentrer sur le problème de positionnement CSS).

Et donc en CSS on aura:

span.image {
	position: relative;
}
span.image img.view {
	position: absolute;
	left: -5px;
	bottom: -5px;
}

La hauteur de l'image non positionnée en absolu (img.vignette) devrait donner sa hauteur et sa largeur à span.image (à vérifier pour la largeur, notamment en combinaison avec un centrage horizontal...). Ce dernier est positionné en relatif, et en tant que plus proche parent positionné de img.view il joue le rôle de référent pour le positionnement absolu de cet élément.

Voilà, c'est à creuser/adapter mais pour l'essentiel c'est ça.

waaaaaaa c'est nickel merci mille fois !!!

Toute bonne nuit !