[CSS] [urgent] superpositions de 2 images
Résolu
bazzouz
Messages postés
442
Statut
Membre
-
bazzouz Messages postés 442 Statut Membre -
bazzouz Messages postés 442 Statut Membre -
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
A voir également:
- Superposer image css
- Image iso - Guide
- Légender une image - Guide
- Reduire taille image - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
2 réponses
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:
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é.
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é.
