[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
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
A voir également:
- Css superposer deux images
- Deux comptes whatsapp - Guide
- Deux ecran pc - Guide
- Trait css ✓ - Forum CSS
- Images gratuites - Guide
- Supprimer une conversation messenger pour les deux personnes ✓ - Forum Facebook
2 réponses
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
27 août 2009 à 13:56
Merci M@dien pour cette explication, je vais l'appliquer ;)
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
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:
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é.