Inserer une image dans un tableau html [Résolu]

Salut, heu ben c'est simple, c'est comme pour mettre une image normal ...
exemple:

<table>
<tr>
<td><img src="image1.jpg" alt="titre" /></td>
<td><img src="image2.jpg" alt="titre" /></td>
</tr>
</table>

A+

Gaerebut

Alors heu là c'est plus dur par contre !
Tu veux mettre un image et écrire par dessus ? Ou a côté mais dans la même cellule du tableau ?

Si c'est le premier cas, tu créé un div et tu lui donne un id comme ceci

<div id="texte"></div>

Ensuite tu mets du texte entre les 2 balises !

<div id="texte">CECI EST UN TEXTE</div>

Puis, pour qu'il vienne chevaucher l'image, a mon avis, il faut utiliser l'attribue absolute en css puis via les 2 autre attribus left et top tu règle le texte sur l'image !

<div id="texte" style="position: absolute; top:Xpx; left: Ypx">CECI EST UN TEXTE</div>

Xpx et Ypx sont les distance en pixel ou le texte aparraîtra sur ton écran !
Essaye de rien mettre (donc juste ça

<div id="texte" style="position: absolute">CECI EST UN TEXTE</div>

), si ça ne marche pas, essaye comme ceci

<div id="texte" style="position: absolute; top: auto; left: auto">CECI EST UN TEXTE</div>

et si ça ne marche toujours pas, remplace le X et le Y par des valeurs comme dans l'exemple suivant :

<div id="texte" style="position: absolute; top:50px; left: 200px">CECI EST UN TEXTE</div>

N'oublie pas que Top place le texte Verticalement et Left, Horizontalement !
L'atribue position: absolute va permettre de dire que l'élément touché (donc ici le div) sera indépendant de tout le reste et pourra donc chevaucher !

Par contre après, il y aura peut-être un problème de z-index !
Donne moi des nouvelles si c'est le cas (en gros, si le texte est caché derrière une image ou autre chose et on ne le voit pas !)

A+

Gaerebut

Mercie serais tu comment faire pour pouvoir y écrire par dessus ^^ stp sérieuux merci tu ma beaucoup aider

Oula y en a qu'aime se compliquer la vie apparemment ^^

Parce que en fait c'est tout simple, suffit de mettre une image de fond à ton <td>, c'est tout.

Donc tu fais ça :

<table>

<tr>
<td style="width:100px; height:40px; background-image: url(image1.jpg);">ton texte</td>
<td style="width:100px; height:40px; background-image: url(image2.jpg);">ton texte</td>
</tr>

</table>

Bien sur dans width et height il faut mettre la taille de ton image de fond (largeur et hauteur en pixels)

Voilà :)

ps : le coup du position absolute marche aussi évidemment, par contre il faut que son parent soit en position relative, sinon il va se placer par rapport au body. Et sinon pourquoi tu lui mets un id si tu utilise le style css dans la balise ???

Ben oui j'y avait pas pensé ^^ lol

Bien évidemment ça marche aussi bien ton code MAIS c'est plus limité dans le principe ou si il veut placer plusieurs images c'est plus dur (même principe mais avec des div au lieu des td)

Puis l'id pour le div ... je sais pas XD l'habitude lol
C'est inutile ...

Donc revoici mon code corigé :

<table>
<tr>
<td style="position: relative"><img src="image1.jpg" alt="titre" /><div id="texte" style="position: absolute;>TEXTE SUR IMAGE 1</div></td>
<td style="position: relative"><img src="image2.jpg" alt="titre" /><div id="texte" style="position: absolute;>TEXTE SUR IMAGE 2</div></td>
</tr>
</table> 

A+

Gaerebut

Oui effectivement si les images n'ont pas les mêmes tailles, ça ne marchera pas il faudra ajouter un no-repeat et positionner le background.

En gros ça donnerait ça :

<table>

<tr>
<td style="width:100px; height:40px; background: url(image1.jpg) no-repeat top left;">ton texte</td>
<td style="width:90px; height:150px; background-image: url(image2.jpg) no-repeat top left;">ton texte</td>
</tr>

</table>

donc là les images vont se mettre en haut à gauche de la cellule, pour les changer de place suffit de changer top par bottom ou center, et left par right ou center.

Bon de toute façon y a toujours plusieurs solutions, donc à lui de voir selon ce qu'il veut faire exactement.

Voilà :)

Mercie mille fois je men sort deja imptipeu mieu ^^