[ Résolu ] Mise en forme dans une newsletter

Bonjour à tous,

voilà j'ai une petite question casse tête à laquelle je ne trouve pas de solution (peut-être parce qu'il n'y en a pas )

Je dois mettre en forme dans une newsletter, une vignette d'un produit dont deux images se superposent.
Jusqu'ici tout va bien sauf que cette newsletter doit passer sur Gmail et Outlook...
là ça se complique car je ne peux pas utiliser les positions, ni mettre des images en background et les margin en négatif ne passe pas...

Pour info, voici un petit site qui liste ce qu'il est possible de faire en css sur un envoi de mail :
http://www.campaignmonitor.com/css/

Etant à cours d'idée, je fais appel à vous dans l'espoir d'un "maaaaais si tu peux faire ça !!" ou d'un "aaaaah ben non y a pas moyen là..."
Bref d'une réponse !!
En vous remerciant !!
Modifié par Speirs (28 Jun 2011 - 14:00)

Impossible de t'aider à l'aveugle mais le code html/css d'une newsletter est effectivement très limité et est sujet à de nombreux défauts d'affichage.

Si tu sais faire des mises en page en tableaux, c'est un bon moyen d'avoir un rendu correct.

Speirs a écrit :
une vignette d'un produit dont deux images se superposent

Syntaxe hésitante mise à part, je pense que tu dois pouvoir faire une seule image qui combine ces deux visuels, non?

Si tu cherches à superposer deux éléments dans une newsletter, que ce soit à coup de positionnement absolu ou marge négative ou autre technique, laisse tomber, ça va pas le faire.

Merci pour vos réponses !

Impossible de t'aider à l'aveugle

En fait j'ai un peu oublié de préciser que je pouvais mettre le code et la css que je voulais, la seul chose que je pouvais pas changer c'est justement ces deux images... donc après libre cours à l'imagination !!

a écrit :
Syntaxe hésitante mise à part, je pense que tu dois pouvoir faire une seule image qui combine ces deux visuels, non?

Arf cela aurait super, mais j'hérite ces deux images d'un CMS donc administrable séparément par l'utilisateur.
Et quand j'ai parlé au développeur de combiner les deux avec par exemple la GD de Php je comprend pas pourquoi il s'est mis à pleurer


Mais finalement j'ai la réponse (enfin c'est le stagiaire avec qui je bosse qui l'a trouvé, on ne dira jamais assez de bien de stagiaires ! )

<div style="height:148px;">
   <span style="max-height:1px; float:left;" ><a href="#"><img border="0" src="img.jpg" alt="" /></a></span>
   <div style="float:right;"><img src="img.png" alt=""></div>
</div>

Le fait d'encapsuler mon image JPG dans un span à "max-height:1px", fait que l'image PNG viens se caler juste en dessus donc à 1px du top...
et je ne sais par quel miracle, mon image JPG s'affiche quand même en entier et du coup passe sous le PNG !!
Bon je sais pas si c'est clair mais en tout cas ça passe sous Gmail !!
Youpie c'est génial vive la vie !!

Merci encore pour votre aide !!

Et l'eau,

Je fais un bref passage pour te signaler ce petit lien très intéressant : template email
Modifié par niuxe (28 Jun 2011 - 08:27)

Sinon au passage n'oublie pas de mettre les informations importantes en texte, thunderbird par défaut n'affiche pas les images par exemple ( et perso je n'active que rarement les images ... il faut que les informations textes soient suffisamment attractives pour que je le fasse ... et ça m'évite d'être tentée )

ci-joint une capture d'écran de ce que je voie lors de l'arrivée des newsletters , tout le monde ne fait pas comme moi c'est sûr mais je ne suis pas la seule ...

Speirs a écrit :
Le fait d'encapsuler mon image JPG dans un span à "max-height:1px", fait que l'image PNG viens se caler juste en dessus donc à 1px du top...

Marchera pas dans Outlook 2007 et 2010, à priori.
Mais si tu peux faire l'impasse sur ces clients, pourquoi pas.

Speirs a écrit :
et je ne sais par quel miracle, mon image JPG s'affiche quand même en entier

Le miracle en question est un comportement par défaut en CSS (la valeur par défaut de la propriété overflow est "visible").

Merci pour le lien niuxe, je vais me regarder ça tranquillement ça à l'air sympa.

Oui Arialia, c'était prévu !

fvsch, pour Outlook 2007+ on va essayer de s'en passer sinon on s'en sortira jamais...
Merci pour l'explication du miracle... c’est ça, la puissance intellectuelle! Bac + 2, les enfants!
Quel classe !