Discussion :

[soeursourire]

Bonjour,

J'ai créé une newsletter sous MailChimp. Sur une ligne de mon tableau j'ai une image de 350 x 350px dans la 1ère colonne et un bloc de texte de 350px de haut dans la 2ème colonne:
voir ligne 1 et 5

Code HTML :

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
18
19
20
21
22
23
24
25
26
27
 <td id="mon_img" width="50%" height="350" style="height:350px;overflow:hidden;"> <!-- ********* ICI ******** -->
                  <a href="monlien">
                    <img mc:edit="retenir_image_href" src="monimageurl" width="350" height="350" alt=""></a>
                  </td>
                  <td id="mon_text" width="50%" height="350" style="background-color:#41738c;margin:0;padding:0;"> <!-- ********* ICI ******** -->
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tr>
                        <td valign="top" align="center" style="margin:0;padding-top:0;padding-bottom:0;padding-left:20px;padding-right:20px;background-color:#41738c;color:#FFFFFF;">
                          <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                              <td height="50" align="center" style="margin:0;padding:0;">
                                <img src="monimageUrl">
                              </td>
                            </tr>
                            <tr>
                              <td align="center" style="margin:0;padding-top:50px;color:#FFF;">
                                <h1 mc:edit="mon_title" style="font-size:18px;line-height:20px;font-weight:bold;margin:0;padding:0;">Bla bla bla</h1>
                                <span mc:edit="mon_texte">Bla bla bla</span>
                              </td>
                            </tr>
                          </table>
                        </td>
                        <td>
                        </td>
                      </tr>
                    </table>
                  </td>

Cela fonctionne très bien sous Outlook ou si j'ouvre mon code dans un navigateur mais quand je me transfère le mail sous Gmail alors la hauteur de ces deux colonnes passent à 361px de haut laissant du vide sous mon image

Une idée pour résoudre ce soucis?
Merci.

[Invité]

Bonjour,

Ne fais pas les choses à moitié.
Il faut définir les hauteurs/largeurs dans le style CSS, pas dans les attributs width="..." et height="...".

Idem pour valign="top" align="center", border="0" cellpadding="0" cellspacing="0" (obsolètes) : on utilise le CSS.

Quant à structurer la page avec des <table>...... (à part pour générer un PDF avec HTMLPDf)... ce n'est pas très "moderne".



N.B. On dit "une souris", mais "un souci". Quant à "un sou six", c'est d'une autre époque.
(la beauté de la langue française...)

[soeursourire]

Merci pour les conseils. Mais je ne comprends pas bien.. pour les newsletters on est bien obligé de passer par des tables... sinon ca ne passe pas dans Outlook ou j'ai loupé quelque chose?

[Invité]

1- Les <table>, c'est une vieille technique, toujours utilisée (surtout parce qu'il n'y avait que ça "avant").

Cela dit, ça reste une valeur sûre (à recommander) dès qu'on veut faire une mise en page un peu complexe (plusieurs colonnes,...)

Là, dans ton code, tu as déjà 3 <table> imbriquées. *
Demande-toi si ça ne peut pas être simplifié.

2- Un code à base de <div> et avec un CSS "propre", ça passe très bien, avec une structure simple. *
Il existe notamment en CSS : display:table; display:table-row; display:table-cell; qui fait très bien la farce.

* Un email / newsletter,... doit rester SIMPLE dans sa construction.
Il vaut mieux privilégier une structure avec une seule colonne. Ne serait-ce que pour la lisibilité (surtout sur petits écrans).