Bonjour à tous,
Je m'arrache les cheveux en ce moment avec une maquette d'emailing et outlook 2013. J'ai tout essayé, ca doit faire 5-6h que je retourne le code dans tous les sens sans comprendre.
Pour vous schématiser ma maquette commence comme ça :
http://www.vendredirect.com/Newsletter/exemple-maquette-alsacreation.jpg
Bon c'est hyper simplifié, il manque énormément de chose en dessous évidemment.
La ligne "logo et quelques liens" est dans un tableau, tout va bien.
En dessous j'ai fait un second tableau avec deux blocs, à gauche du texte, à droite une image ,séparés par des TD de 13px pour faire la margin.
Ces deux tableaux fond 640px de large (ils sont imbriqués dans un tableau de 100% pour le bgcolor)
Le premier tableau à l'air de faire à peu pres la bonne taille. Le second par contre se met automatique à 100% de large...
La seule chose que j'ai trouvé c'est de mettre des <br> à chaque bout de phrase dans le bloc de texte et la ca veut bien. Bon c'est tout sauf pratique quelqu'un sait ce que j'ai oublié ?
Voici un extrait du code
Il est possible que ce bout de code ne soit pas super beau, j'ai fais 12 000 tests dessus... Tout ce qui m’intéresse ici c'est que le second tableau fasse bien 640px et pas 100% sous Outlook 2013.
Merci à ceux qui se pencheront sur ce sujet, si je ne suis pas clair n'hésitez pas à me le dire :
Edit: je vous rajoute un exemple de ce que ca donne dans outlook 2013 :
http://www.vendredirect.com/Newsletter/exemple-outlook.png
Modifié par OlivierVD (02 Nov 2015 - 17:23)
Je m'arrache les cheveux en ce moment avec une maquette d'emailing et outlook 2013. J'ai tout essayé, ca doit faire 5-6h que je retourne le code dans tous les sens sans comprendre.
Pour vous schématiser ma maquette commence comme ça :
http://www.vendredirect.com/Newsletter/exemple-maquette-alsacreation.jpg
Bon c'est hyper simplifié, il manque énormément de chose en dessous évidemment.
La ligne "logo et quelques liens" est dans un tableau, tout va bien.
En dessous j'ai fait un second tableau avec deux blocs, à gauche du texte, à droite une image ,séparés par des TD de 13px pour faire la margin.
Ces deux tableaux fond 640px de large (ils sont imbriqués dans un tableau de 100% pour le bgcolor)
Le premier tableau à l'air de faire à peu pres la bonne taille. Le second par contre se met automatique à 100% de large...
La seule chose que j'ai trouvé c'est de mettre des <br> à chaque bout de phrase dans le bloc de texte et la ca veut bien. Bon c'est tout sauf pratique quelqu'un sait ce que j'ai oublié ?
Voici un extrait du code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gabarit newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/* Fonts and Content */
body, td { font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-size:14px; }
body { background-color: #E6E7E8; margin: 0; padding: 0; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
h2{ padding-top:12px; /* ne fonctionnera pas sous Outlook 2007+ */color:#0E7693; font-size:22px; }
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:rgb(230, 231, 232)" >
<tbody>
<tr>
<td align="center" bgcolor="#E6E7E8">
<table width="640px" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="640px" align="center">
- visualisez ce message dans votre <a href="www.vendredirect.com">navigateur Internet</a> -
</td>
</tr>
</tbody>
</table>
<table width="640px" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
<tbody>
<tr>
<td width="8px" bgcolor="#ffffff"> </td>
<td width="184px" bgcolor="#ffffff"><a href="www.vendredirect.com"><img src="http://www.vendredirect.com/Newsletter/img/logo.jpg" style="display:block;" alt="VendreDirect - immobilier sans commission d'agence" width="178px" height="82px" border="0"/></a></td>
<td width="440px" style=" font-family:'AvantGarde Bk BT', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align:right;" bgcolor="#ffffff" align="right">
<a href="http://www.vendredirect.com/vendre-une-propriete/tarifs-inscription/">Vendre un bien</a> <img src="http://www.vendredirect.com/Newsletter/img/losange.jpg" alt="losange" width="6px" height="6px" style="display:block;"/>
<a href="http://www.vendredirect.com/recherche/">Acheter un bien</a> <img src="http://www.vendredirect.com/Newsletter/img/losange.jpg" alt="losange" width="6px" height="6px" style="display:block;"/>
<a href="http://www.vendredirect.com/vendre-une-propriete/tarifs-inscription/">Nos tarifs</a> <img src="http://www.vendredirect.com/Newsletter/img/losange.jpg" alt="losange" width="6px" height="6px" style="display:block;"/>
<a href="http://blog.vendredirect.com/">Blog</a>
</td>
<td width="8px"> </td>
</tr>
</tbody>
</table>
<table width="640px" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
<tbody>
<tr>
<td width="13px" bgcolor="#FFFFFF"> </td>
<td width="501px" bgcolor="#FFFFFF">
<h1>EDITO DE LA REDACTION :</h1>
<p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</td>
<td width="13px" bgcolor="#FFFFFF"> </td>
<td width="100px" bgcolor="#FFFFFF" align="right" ><img src="http://www.vendredirect.com/Newsletter/img/christophe.jpg" alt="C" width="82px" height="82px" border="0" style="display:block;"/></td>
<td width="13px" bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Il est possible que ce bout de code ne soit pas super beau, j'ai fais 12 000 tests dessus... Tout ce qui m’intéresse ici c'est que le second tableau fasse bien 640px et pas 100% sous Outlook 2013.
Merci à ceux qui se pencheront sur ce sujet, si je ne suis pas clair n'hésitez pas à me le dire :
Edit: je vous rajoute un exemple de ce que ca donne dans outlook 2013 :
http://www.vendredirect.com/Newsletter/exemple-outlook.png
Modifié par OlivierVD (02 Nov 2015 - 17:23)
