[CSS] [urgent] superpositions de 2 images
Résolu
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
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
Configuration: Windows XP Opera 9.80
2 réponses
-
Merci M@dien pour cette explication, je vais l'appliquer ;)
-
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é.
