Sujet Précédent Sujet Suivant

[CSS] [urgent] superpositions de 2 images

Résolu/Fermé
bazzouz Messages postés 363 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 20 juillet 2011 - 26 août 2009 à 23:11
bazzouz Messages postés 363 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 20 juillet 2011 - 27 août 2009 à 13:56
Bonjour,
Je voudrais positionner une image (croix) à l'angle supérieur droite d'un avatar pour pouvoir supprimer un utilisateur à travers ce croix.

J'utilise dreamweaver, j'ai réussi à déplacer le croix vers l'angle voulue en mettant position:absolute dans l'image et en utilisant l'outil création de dreamweaver.

le problème c que j'ai beaucoup d'image (croix) à mettre et je peu pas à chaque foix positionner correctement l'image croix.

Y a t-il autrement ?

ou comment savoir la position left et top en pixel d'un élément dans une image.

Merci de m'aider

C urgent pour ce soir

2 réponses

Réponse 1 / 2
bazzouz Messages postés 363 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 20 juillet 2011 81
27 août 2009 à 13:56
Merci M@dien pour cette explication, je vais l'appliquer ;)
0
Réponse 2 / 2
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
27 août 2009 à 10:00
Bonjour,

Petit conseil: attention à l'utilisation de la formule "c'est urgent" qui rebute certains et peut ralentir plus qu'autre chose la demande ^^

Pour ta demande, j'ai concocté un petit code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>test</title>
		<style type="text/css">
			div.avatar {
				/* Pour définir la base des position:absolute suivant 
				Peut prendre la valeur relative, absolute ou fixed */
				position:relative;
				/* Pour limiter le block en largeur */
				width:150px;
				/* Pour supprimer un bug d'affichage */
				line-height:0px;
				/* pour le style ^^ */
				padding:2px;
				background:lightgrey;
				border:1px solid grey;
				/* pour que l'image de l'avatar soit aligné à droite, en dessous du bouton */
				text-align:right;}
			div.avatar img{
				/* Pour limiter l'avatar */
				max-width:150px;
				max-height:150px;}
			div.avatar a.supprimer {
				/* Pour pouvoir définir facilement sa taille */
				display:block;
				/* On place le bouton en haut à droite */
				position:absolute;
				top:3px;
				right:3px;}
			div.avatar a.supprimer img {
				/* pour le style. */
				border:0px;
				width:20px;
				height:20px;
				opacity:0.5;}
			div.avatar a.supprimer:hover img{
				opacity:1;}
		</style>
	</head>
	<body >
		<div class="avatar">
			<img src="a.jpg" alt="a"/><a href="#" title="supprimer" class="supprimer"><img src="b.jpg" alt="supprimer"/></a>
		</div>
	</body> 
</html>


Explication:
Lorsqu'un élément a une position en relative, absolute ou fixed, les éléments fils prendront comme base cette balise là.
Si le div n'a pas de position:relative, absolute ou fixed, l'image se fixera à la fenêtre du navigateur ou au premier parent positionné.
-1