Positionnement d'image relative/absolu

Positionnement d'image relative/absolu - HTML/CSS - Programmation

Marsh Posté le 26-06-2007 à 18:39:19    

Bonjour,
 
J'aimerais positionner 3 images (avec des zindex différents) dans une cellule.
 
J'aimerai positionnes ces images (un peu décalées) en absolu mais relativement par rapport au coin haut/gauche de ma cellule...
 
En dehors su tableau, c'est OK.
Mais inséré dans une cellule, je passe en relative car je veux que mon image soit dans la cellule !!!  Cela ne marche pas...
 
Code :
 
Citation:
<html>
<head>
<title></title>
</head>
<body>
<img id="div_0" style="margin:0;z-index:3;position:absolute;top:0;left:0;" src="./images/210AEN3QKJL.jpg" />
<img id="div_1" style="margin:0;z-index:2;position:absolute;top:10;left:10;" src="./images/21YRA58WF5L.jpg"/>
<img id="div_2" style="margin:0;z-index:1;position:absolute;;top:20;left:20;" src="./images/21ZR0WNH0ML.jpg" />
<table width="400" border="1" align="center">
<tr height="150">
<td valign="top" align="left">
<img id="div_0" style="margin:0;z-index:3;position:relative;top:0;left:0;" src="./images1.jpg"/>
<img id="div_1" style="margin:0;z-index:2;position:relative;top:10;left:10;" src="./images2.jpg"/>
<img id="div_2" style="margin:0;z-index:1;position:relative;;top:20;left:20;" src="./image3.jpg"/>
</td>
</tr>
</table>
</body>
</html>
 
Aidez moi svp...
 
Pascal

Reply

Marsh Posté le 26-06-2007 à 18:39:19   

Reply

Marsh Posté le 26-06-2007 à 23:44:22    


    C'est plus joli et surtout plus lisible comme ça non?

Code :
  1. <html>
  2. <head>
  3.  <title>Coucou!</title>
  4.             <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
  5. </head>
  6. <body>
  7.  <img id = "div_0" alt = 'Image en haut à gauche' src = "./images/210AEN3QKJL.jpg" />
  8.  <img id="div_1" src="./images/21YRA58WF5L.jpg"/>
  9.  <img id="div_2" src="./images/21ZR0WNH0ML.jpg" />
  10.  <table width="400" border="1" align="center">
  11.   <tr height="150">
  12.    <td valign="top" align="left">
  13.     <img id="div_0"  src="./images1.jpg"/>
  14.     <img id="div_1"  src="./images2.jpg"/>
  15.     <img id="div_2"  src="./image3.jpg"/>
  16.    </td>
  17.   </tr>
  18.  </table>
  19. </body>
  20. </html>


 
    Le code CSS dans le fichier design.css

Code :
  1. #div_0{
  2. margin:0;
  3. z-index:3;
  4. position:absolute;
  5. top:0;
  6. left:0;
  7. }
  9. #div_1{
  10. ...
  11. }
  13. ...


 
    Ceci n'est pas une contribution efficace ^^ Désolé...
    Une remarque... Pourquoi utiliser un tableau et ne as se contenter des positionnement absolu et/ou relatif aux éléments précédents ta seconde série d'image?

Reply

Sujets relatifs:

Leave a Replay

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