Bonjour !
Je cherchais comment faire pour superposer deux images différentes en une seule, et j'ai trouvé la solution après une recherche google :
Code :
- <style type="text/css">
- <!--
- .multicouche {
- position: relative;
- display: block;
- }
- .multicouche img {
- position: absolute;
- display: block;
- }
- .couche1 {
- z-index: 1;
- top:5px;
- left:5px;
- }
- .couche2 {
- z-index: 2;
- }
- -->
- </style>
- <span class="multicouche" >
- <img class="couche1" src="img1.png" width="64" />
- <img class="couche2" src="img2.png" width="74" />
- </span>
- <span class="multicouche" >
- <img class="couche1" src="img3.png" width="64" />
- <img class="couche2" src="img4.png" width="74" />
- </span>
|
Le problème est que si je procède ainsi, je n'arrive pas à mettre côte à côte deux couples d'images
Si je fais ça :
Code :
- <style type="text/css">
- <!--
- .multicouche {
- position: relative;
- display: block;
- }
- .multicouche img {
- position: absolute;
- display: block;
- }
- .couche1 {
- z-index: 1;
- top:5px;
- left:5px;
- }
- .couche2 {
- z-index: 2;
- }
- -->
- </style>
- <span class="multicouche" >
- <img class="couche1" src="img1.png" width="64" />
- <img class="couche2" src="img2.png" width="74" />
- </span>
- <span class="multicouche" >
- <img class="couche1" src="img3.png" width="64" />
- <img class="couche2" src="img4.png" width="74" />
- </span>
|
, tout se superpose en une seule image.
J'aimerais en fait entre les deux couples d'images avoir le même comportement que si je mettais deux balises <img> l'une à la suite de l'autre (attention, je ne veux pas "truquer" en utilisant des calculs sur les positions pour correctement placer mon second couple, j'aimerais trouver une solution plus simple)
Merci d'avance
NC
Message édité par nisalon_caje le 04-06-2011 à 07:20:20
---------------
http://nisalon.labrute.com/