Image par dessus une autre[Résolu]

Bonjour,

J'ai une liste de vignettes dynamique (donc taille variable), quand on clique dessus elles s'agrandient, ca ca marche.

Je voudrais placer par dessus chacune d'elle un petit picto (zoom.gif) en bas à droite, pour que les gens voiens que la vignette est cliquable. J'ai essayé plusieurs méthode mais je n'y arrive pas.

Est ce que quelqu'un aurais une idée ?

Vincent
Modifié par vincent pique (20 Sep 2007 - 09:53)

Bonjour,

Rapidement:

[b]HTML:[/b]
<span class="bloc-vignette">
	<img src="..." alt="texte alternatif pour l'image" />
	<img class="picto" src="..." alt="(cliquez pour agrandir)" />
</span>

[b]CSS:[/b]
.bloc-vignette {
	position: relative;
}
.bloc-vignette img.picto {
	position: absolute;
	bottom: 0;
	right: 0;
}

Ça devrait être bon. Mais ça sera sans doute à affiner pour certains navigateurs. Peut-être faudra-t-il utiliser un peu de z-index pour avoir le bon empilement, par exemple.
Modifié par Florent V. (19 Sep 2007 - 14:57)

Salut,
Peux-tu montrer ton code ?

merci
Modifié par ingrid04 (19 Sep 2007 - 12:55)

Merci, mais ca marche pas. Sous ie le picto se met en bas en droite de la page (je ne comprends pas pourquoi), et sous firefox ca marche à peu près (décalage de quelques pixels).

Voici ma page en ligne :
http://serveur-startup.com/test.html

Ça marche avec IE ainsi:

[b]HTML:[/b]
<span class="bloc-vignette">
	<img src="..." alt="texte alternatif pour l'image" />
	<img class="picto" src="..." alt="(cliquez pour agrandir)" />
</span>

[b]CSS:[/b]
.bloc-vignette {
	[b]float: left;[/b]
	position: relative;
}
.bloc-vignette img.picto {
	position: absolute;
	bottom: 0;
	right: 0;
}

Mais il faut pouvoir utiliser float...

Edit: sinon, si on est sûr de rester en mode Quirks (ce qui est une mauvaise idée, soit dit en passant), on peut utiliser un simple height: 1% à la place du float: left.

PS: si la notion de «mode Quirks» n'est pas connue, faire une petite recherche.
Modifié par Florent V. (19 Sep 2007 - 15:08)

Super, ca marche.

Merci beaucoup.