Superposer deux fois deux images

Superposer deux fois deux images - HTML/CSS - Programmation

Marsh Posté le 04-06-2011 à 07:18:36    

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 :
  1. <style type="text/css">
  2.     <!--
  3.     .multicouche {
  4.         position: relative;
  5.         display: block;
  6.     }
  7.     .multicouche img {
  8.         position: absolute;
  9.         display: block;
  10.     }
  12.     .couche1 {
  13.         z-index: 1;
  14.         top:5px;
  15.         left:5px;
  16.     }
  18.     .couche2 {
  19.         z-index: 2;
  20.     }
  21.     -->
  22. </style>
  25.     <span class="multicouche" >
  26.         <img class="couche1" src="img1.png" width="64"  />
  27.         <img class="couche2" src="img2.png" width="74" />
  28.     </span>
  30.     <span class="multicouche" >
  31.         <img class="couche1" src="img3.png" width="64"  />
  32.         <img class="couche2" src="img4.png" width="74" />
  33.     </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 :
  1. <style type="text/css">
  2.     <!--
  3.     .multicouche {
  4.         position: relative;
  5.         display: block;
  6.     }
  7.     .multicouche img {
  8.         position: absolute;
  9.         display: block;
  10.     }
  12.     .couche1 {
  13.         z-index: 1;
  14.         top:5px;
  15.         left:5px;
  16.     }
  18.     .couche2 {
  19.         z-index: 2;
  20.     }
  21.     -->
  22. </style>
  25.     <span class="multicouche" >
  26.         <img class="couche1" src="img1.png" width="64"  />
  27.         <img class="couche2" src="img2.png" width="74" />
  28.     </span>
  30.     <span class="multicouche" >
  31.         <img class="couche1" src="img3.png" width="64"  />
  32.         <img class="couche2" src="img4.png" width="74" />
  33.     </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/
Reply

Marsh Posté le 04-06-2011 à 07:18:36   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed