Forum d'entraide PHPFrance

Bonjour à tous,

J'essaie de superposer un texte sur une image et malheureusement, lorsque je l'envoie par mail en HTML le texte se positionne sous l'image...

Savez-vous d'ou cela peut venir?
Merci par avance.

<p><img src="http://rlv.zcache.ca/le_14eme_anniversaire_de_google_carte_de_voeux-r6dbca76deab34fb699d72c0d58331271_xvuae_8byvr_630.jpg?view_padding=%5B285%2C0%2C285%2C0%5D" alt="" /></p>
<div style="position: absolute; left: 10px; top: 450px; width: 590px; height: 150px;">
<p>Nouvelle couche&hellip;</p>
<p>fdpksfodsjfjdsjfiojdsiofjidsof</p>
<p>fdslmjfoiksdhifhdsjfdsjofjsdlpokfhjiusxkscq</p>
<p>^dpsiofisdiojfiodsjofdsofkdsopfs</p>
</div>

Cordialement,

Slt,

As-tu joué avec les z-index ?

Mega

Bonjour,

La gestion des CSS dans les clients de messagerie est très très incomplète et varie grandement d'un logiciel de messagerie/webmail à un autre. Fait des tests avec Gmail, Outlook, Thunderbird et le client mail d'Android et de l'iphone, et tu te rendras compte du désastre.

Mon conseil est d'abandonner cette idée pour revenir à du HTML4.1 de base et être ainsi sûr que tes mails seront lus partout correctement (notamment sur mobile...)

Merci pour vos réponses.
Ce qui veut dire en terme de code?

Comment cela se traduit?
Merci par avance.

Cordialement,

+1 avec le roi
C'est très compliqué de faire de la "mise en page" et que tout soit pris par tous les clients de messagerie.
J'avais fait une petite trame newsletter qui marchait sur toutes les boites.
Là, tu veux en plus faire de la superposition d'éléments, c'est risqué.
Sinon pour le test tu peux essayer ceci :

<div style="position: absolute; left: 10px; top: 450px; width: 590px; height: 150px;z-index:9999;">

mais encore une fois, c'est pas l'idéal !

Mega

Merci.
En fait je souhaite afficher un texte sur une image...
Mais comment faire que celui-ci soit bien affiché... Peu importe la manière. Si vous avez des idées car avec le Z-index j'ai déjà testé et cela ne fonctionne pas...

Un tableau avec une image en background
Ou la méthode la + sûre, tu écris le texte dans l'image et tu enregistres ça sous la forme d'une image pour l'envoyer

Merci.
Je vais essayer le tableau.

Pour l'autre solution, impossible... le texte est personnalisé à chaque envoi.

Bon bah... ça ne fonctionne pas lorsque l'on envoie dans outlook...
C'est une vraie galère ce truc!

Pour l'autre solution, impossible... le texte est personnalisé à chaque envoi.

si c'est possible, tu génères dynamiquement l'image en php.

tu m’intéresses là...
Comment je peux faire ceci stp?

Merci pour ton aide.

Merci.
Est-ce qu'il y a un exemple concret car je ne comprends pas comment faire là?

Mais tu as raison, si mon php peux récupérer mon $_POST['texte'] + mon <img src="http://www.site.fr/image/016.gif" alt="Carte"> et fusionner pour ne donner qu'une image, ce serait top.

Mais comment faire ça simplement? car je suis vraiment débutant.
Merci par avance;

Cordialement,

Bonjour,

Il y a un exemple assez complet dans la doc ici :
https://secure.php.net/manual/fr/image. ... ermark.php

Bon bah ça ne fonctionne pas...
ça me rend dingue cette histoire!

<?php
// Charge le cachet et la photo afin d'y appliquer le tatouage numérique
$im = imagecreatefromjpeg('http://monsite.fr/carte__2016/Carte.gif');

// Tout d'abord, nous créons un cachet manuellement grâce à GD
$stamp = imagecreatetruecolor(100, 70);
imagefilledrectangle($stamp, 0, 0, 99, 69, 0x0000FF);
imagefilledrectangle($stamp, 9, 9, 90, 60, 0xFFFFFF);
$im = imagecreatefromjpeg('Carte.gif');
imagestring($stamp, 5, 20, 20, 'test', 0x0000FF);
imagestring($stamp, 3, 20, 40, '(c) 2007-9', 0x0000FF);

// Définit les marges du cachet et récupère la largeur et la hauteur du cachet
$marge_right = 10;
$marge_bottom = 10;
$sx = imagesx($stamp);
$sy = imagesy($stamp);

// Fusionne le cachet dans notre photo avec une opacité de 50%
imagecopymerge($im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp), 50);

// Sauvegarde l'image dans un fichier et libère la mémoire
imagepng($im, 'photo_stamp.png');
imagedestroy($im);

?>