[Résolu] Superposer deux images dans un tableau

Bonjour à tous

J'ai un petit problème que je n'arrive pas à résoudre...
J'ai un tableau dont chaque cellule contient, et j'aimerais pouvoir superposer sur certaines de ces cellules une deuxième image.

Le HTML :

    <table>
      <tr>
        <td><img src="image.png" /></td>
        <td><img src="image.png" /></td>
        <td><img src="image.png" /></td>
      </tr>
      
      <tr>
        <td><img src="image.png" /></td>
        <td><!-- Image à superposer dans cette cellule--><img src="image.png" /></td>
        <td><img src="image.png" /></td>
      </tr>
      
      <tr>
        <td><img src="image.png" /></td>
        <td><img src="image.png" /></td>
        <td><img src="image.png" /></td>
      </tr>
      
    </table>

Le CSS :

  table {
    border-collapse: collapse;
  }
  
  td {
    height: 50px;
    width: 50px ;
    border: 1px solid black;
    padding:0px;
  }
  
  td img /* Bug d'Opera */ {
    display:block;
    margin:0px;
  }

L'image à intégrer serait croix.gif, sachant que tout comme image.png, ses dimensions sont 50*50px

Quelqu'un aurait-il une solution ?
Merci d'avance
Coyazuu
Modifié par Coyazuu (24 Apr 2007 - 22:44)

Bonsoir,
pourrait tu expliquer ou se situe ton problème exactement?
Si tu superposes une deuxxième image, ta cellule devrait faire 100px et non
50px comme indiquée dans la CSS.

Justement ^^

Je veux les superposer, que la deuxième soit exactement au dessus de la première, de sorte que ces deux images tiennent dans 50*50px.

La deuxième image est en partie transparente, permettant de voir celle du dessous

Salut !

tu peux :
1) mettre la première image en background-image et mettre la seconde normalement dans la cellule

2) mettre la premiere normalement, et mettre la seconde en absolue dans la cellule

Ca devrait fonctionner.

Merci pour ta réponse

En fait, je préfèrerais éviter le background image : le tableau est dynamique (généré par du PHP en fait) et ça m'obligerais soit à créé des dizaines de classe (une pour chaque image différente) ou soit utiliser un style="background-image:url('image.png')" sur mon <td>, solution que je trouve pas très propre non plus ^^


Quant à la deuxième solution... Je comprends pas vraiment

Pourrais je avoir un bout de code s'il te plait ?
Encore merci

Coyazuu

Hello,
à tester:

 
<tr>
<td><img src="image.png" /></td>
<td><!-- Image à superposer dans cette cellule--><img class="img2" src="image.png" /></td>
<td><img src="image.png" /></td>
</tr>

.img2 {position:absolute}

Modifié par Hermann (24 Apr 2007 - 18:38)

Euh... Je le mets où mon croix.gif oO ?

Oups une petite erreur
N'oublies pas de lettre les dimensions des images (pour les appareils portatifs
et plus généralement les petits écrans > media="handheld") et au minimum une alternative textuelle vide pour rendre le code valide et pour des raisons d'accessibilité : alt=""

<td><img class="img2" src="croix.gif" /><img src="image.png" /></td>

.img2 {position:absolute}

(j'avais oublié le "t")
Modifié par Hermann (25 Apr 2007 - 14:30)

Waaah génial, ça marche \o/

Merci beaucoup

Par contre, j'ai encore 2 ptites questions :
- pourquoi position: absolute a ce comportement là ?
- c'est quoi media="handheld"

Et enfin, j'oublierais pas le alt=""

Encore merci
Coyazuu

PS : je mets en résolu dès que j'ai mes réponses

Le position:absolute va sortir ton image du flux. Elle va donc se retrouver sur une "couche" au-dessus du reste de ton contenu. Et si tu ne la décales pas avec les propriétés top et left, elle reste au même endroit. CQFD

Quant au media handheld, c'est ce qui permet de gérer l'affichage sur les appareils portatifs (genre PDA). Mais je n'en sais pas plus à ce sujet.

Le média "handheld" est un type de média CSS qu'on associe au <link>, @import ou <style>
d'une CSS. A ma connaissance celui-ci n'est pris en compte que par Opera.
Exemple :

<link href="style.css" rel="stylesheet" type="text/css" media="handheld" />

Modifié par Hermann (25 Apr 2007 - 14:29)

Ok !

Merci pour tout !