Discussion :

[Emyleen]

Bonjour,

Je met en forme actuellement une newsletter pour un client.
La mise en forme est parfaite sous thunderbird mais lorsque je passe sous Gmail les "position: absolute;" ainsi que les "position: relative;" bref, tout ce qui concerne la position de mes blocs et images disparaissent.

J'utilise ces propriétés afin d'éviter d'avoir des background-image (qui ne s'affichent pas sous Gmail).

Quelqu'un aurait-il une explication et si possible une solution à me proposer?

Voici un exemple de code qui ressemble au mien (car les données sont privées bien sur ) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<table width="610px" style="background-image: url(fond-page.jpg); background-repeat: repeat-y; background-color: #FFFFFF; padding-top:0px; padding-left: 6px; padding-right: 4px; margin: auto;" cellspacing="0">
<tbody style="margin: 0; padding: 0;">
  <tr style="vertical-align: text-top;">
    <td height="386px" width="600px" style="padding:0;">
      <img src="bandeau.jpg" alt="Bandeau" style="position: absolute; top: 0;"/>
      <h1 style="width: 480px; position: relative; margin-left: 120px; margin-top: 260px; color: #365e23; font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-transform: uppercase;">Du Vendredi 19 Mars au Jeudi 25 Mars 2010</h1>
      <ul style="position: relative; margin-top: 30px; margin-left: 70px; list-style: none; font-size: 10px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase;">
        <li style="float:left; margin-left: 0px;">
          <a href="#lundi" title="lundi" style="color: #365e23;">lundi</a><?php
          <img src="carre-vert.jpg" alt="" style="margin-left: 3px; margin-right: 3px;"/>
        </li>
      </ul>
    </td>
  </tr>
</tbody>
</table>

[12monkeys]

Bonsoir

Voici un tutoriel sur la compatibilité des propriétés CSS dans les clients mail ou webmails : http://a-pellegrini.developpez.com/tutoriels/css/email/

Tu verra en particulier que la propriété position n'est pas gérée par Gmail. Il faudra changer de méthode...

[Emyleen]

Merci de ta réponse, ce tableau me sera très pratique