mail html tableau décalé

mail html tableau décalé - HTML/CSS - Programmation

Marsh Posté le 07-08-2013 à 01:39:06    

Bonjour,
 
Je suis en train de réaliser un mail html pour demarcher avec mon groupe, et donc après avoir fait mes recherches sur les syntaxes, façons de le faire j'en arrive à ça :
 
 
 
<!-- Main table-->
 
<table width="100%" height="100%" cellpadding="0" style="padding: 20px 0px 20px 0px; background-color:#555555;">
<tbody><tr align="center"><td>
 
 
 
 
<!-- Header -->
 
 
<table cellpadding="0" cellspacing="0" width="800">
<tbody>
<tr>
<td valign="middle" style="width:400px;" background="http://static.wixstatic.com/media/470c77_1ff48e7d4bfc96c8d56709e23718fa96.jpg">
<img src="http://static.wixstatic.com/media/470c77_278241bae365f9fab383afa0479bdf65.png" width="370">
</td>
 
<td valign="middle" style="width:400px; background-color:#15203E;">
<img src="http://static.wixstatic.com/media/470c77_8342f2a391cbd685208888dd90d7c06b.jpg" width="400">
</td>
</tr>
</tbody>
</table>
 
<!-- Fin Header -->
 
<!-- Intérieur -->
 
<table width="800" cellpadding="0" cellspacing="0" style="color:#ffffff;">
<tbody>
<tr>
<td align="center" valign="middle" style="width:400px; color:#000000; font-size:13px; padding:25px 25px 25px 25px; text-align:justify; line-height:25px;" background="http://static.wixstatic.com/media/470c77_1ff48e7d4bfc96c8d56709e23718fa96.jpg">
 
<p>Gravity Off est un groupe de rock originaire de Paris formé en 2008. Le mélange des voix et des instruments donne naissance à des arrangements riches et colorés qui rendent les compositions de Gravity Off si efficaces.<br /><br />
 
Gravity Off c’est une heure de show, un groupe idéal pour les programmations rock et les premières parties. <br /><br />
 
<div align="center" style="font-size:16px;"><a href="http://www.gravity-off.com/">www.gravity-off.com</a></div></p>
</td>
 
<td align="center" valign="middle" style="width:400px; background-color:#536375; color:#15203e; font-size:13px; padding:25px 25px 25px 25px; text-align:justify; line-height:25px;">
 
<p>Across The Other Moon est un groupe de rock français formé en 2007.
<br /><br />Présentant des compositions originales, mélodiques et rythmées, ATOM saura vous faire vibrer dès les premières notes.
La formation est composée de 4 membres: 2 Guitares/ Chant , Basse, Batterie.<br />
<br />
<div align="center" style="font-size:16px;"><a href="http://www.acrosstheothermoon.com/">www.acrosstheothermoon.com</a></div></p>
 
</td>
</tr>
</tbody>
</table>
 
<!-- Fin Intérieur -->
 
 
<!-- Liens -->
 
<table width="800" cellpadding="0" cellspacing="0" style="color:#ffffff;">
<tbody>
<tr>
 
<td align="center" valign="top" style="width:400px;" background="http://static.wixstatic.com/media/470c77_1ff48e7d4bfc96c8d56709e23718fa96.jpg">
 
<table width="400" style="padding: 0px 33px 33px 33px">
 
<tbody>
<tr align="center">
 
<td align="left">
<a href="https://soundcloud.com/gravity-off"><img src="http://www.iconsdb.com/icons/preview/000000/soundcloud-3-xxl.png" title="Soundcloud" alt="soundcloud" width="100"></a>
</td>
 
<td align="center">
<a href="http://www.facebook.com/gravityoffofficial"><img src="http://www.iconsdb.com/icons/preview/000000/facebook-3-xxl.png" title="Facebook" alt="facebook" width="100"></a>
</td>
 
<td align="right">
<a href="https://www.youtube.com/user/GravityOffofficial"><img src="http://www.iconsdb.com/icons/preview/000000/youtube-3-xxl.png" title="Youtube" alt="youtube" width="100"></a>
</td>
 
</tr>
</tbody>
</table>
 
</td>
 
 
 
<td align="center" valign="top" style="width:400px; background-color:#536375;">
 
<table width="400" style="padding: 0px 33px 33px 33px">
<tbody>
<tr align="center">
 
<td align="left">
<a href="https://soundcloud.com/acrosstheothermoon"><img src="http://www.iconsdb.com/icons/preview/15203E/soundcloud-3-xxl.png" title="Soundcloud" alt="soundcloud" width="100"></a>
</td>
 
<td align="center">
<a href="http://www.facebook.com/acrosstheothermoon"><img src="http://www.iconsdb.com/icons/preview/15203E/facebook-3-xxl.png" title="Facebook" alt="facebook" width="100"></a>
</td>
 
<td align="right">
<a href="https://www.youtube.com/acrosstheothermoon"><img src="http://www.iconsdb.com/icons/preview/15203E/youtube-3-xxl.png" title="Youtube" alt="youtube" width="100"></a>
</td>
 
</tr>
</tbody>
</table>
 
</td>
 
</tr>
</tbody>
</table>
 
<!-- Fin Liens -->
 
 
<!-- Photos fin -->
 
<table cellpadding="0" cellspacing="0" width="800">
<tbody>
<tr>
<td valign="bottom" style="width:400px;" background="http://static.wixstatic.com/media/470c77_1ff48e7d4bfc96c8d56709e23718fa96.jpg">
<img src="http://static.wixstatic.com/media/470c77_233eb630d65f34a2ca4db4d0cc4af5cd.jpg" width="400" align="bottom">
</td>
 
<td valign="middle" style="width:400px; background-color:#15203E;">
<img src="http://static.wixstatic.com/media/470c77_8342f2a391cbd685208888dd90d7c06b.jpg" width="400">
</td>
</tr>
</tbody>
</table>
 
<!-- Fin Photos Fin -->
 
</td></tr></tbody></table>
 
 
Donc c'est ce que je voulais dans l'ensemble. Sauf que le tableau qui contient le texte est décalé au centre par rapport au reste des tableaux. J'ai regardé cent fois d'où ça pouvait venir, s'il y avait pas un caractère manquant etc. Je n'arrive absolument pas à trouver d'où vient le problème.
 
Votre oeil ou vos connaissances aiguisées m'aideront !
 
Merci d'avance.
 
 

Reply

Marsh Posté le 07-08-2013 à 01:39:06   

Reply

Marsh Posté le 07-08-2013 à 14:57:52    

Déjà, tu devrais commencer par optimiser tes images. une boîte qui m'envoie un mail de 18 Mo, elle est pas prête de me vendre qq chose :o
 
Pour ton pb, je pense que ça vient de tes 2 tableaux de 400px de large l'un à côté de l'autre qui pose soucis, sans doute à cause des marges par défaut qui viennent se rajouter...
 
Edit : pour mieux voir ce qui pose pb, tu devrais ajouter pour chaque zone une bordure d'1px d'une couleur différente pour visualiser jusqu'où va chaque tableau. Installer l'extension Firebug pour Firefox pourra t'aider aussi.


Message édité par rufo le 07-08-2013 à 14:59:30

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 07-08-2013 à 15:07:25    

Bon, en fait, c'était tes padding 25px 25px 25px 25px qui foutaient la merde. Et oui, encore le pb du modèle boîte.
Chez Firefox, le width fait 400px avec un padding de 0. Si tu ajoutes du padding, la largeur résultante est width+padding-left+padding-right. Chez Internet explorer, c'est pas le cas, le width ne change pas, le padding réduit juste la large du contenu.
 
Conclusion : tu enlèves les paddings et sur tes balises à l'intérieur des <td> qui font 400px de large, tu mets des margin de 25px ;)
 
Edit : Voici le code modifié :

Code :
  1. <!-- Main table--> 
  2.   
  3. <table width="100%" height="100%" cellpadding="0" style="padding: 20px 0px 20px 0px; background-color:#555555;"> 
  4. <tbody><tr align="center"><td> 
  5.   
  6. <!-- Header --> 
  7.   
  8. <table cellpadding="0" cellspacing="0" width="800"> 
  9. <tbody> 
  10. <tr> 
  11. <td valign="middle" style="width:400px;" background="http://static.wixstatic.com/media/470c77_1ff48e7d4bfc96c8d56709e23718fa96.jpg"> 
  12. <img src="http://static.wixstatic.com/media/470c77_278241bae365f9fab383afa0479bdf65.png" width="370"> 
  13. </td> 
  14.   
  15. <td valign="middle" style="width:400px; background-color:#15203E;"> 
  16. <img src="http://static.wixstatic.com/media/470c77_8342f2a391cbd685208888dd90d7c06b.jpg" width="400"> 
  17. </td> 
  18. </tr> 
  19. </tbody> 
  20. </table> 
  21.   
  22. <!-- Fin Header --> 
  23.   
  24. <!-- Intérieur --> 
  25.   
  26. <table width="800" cellpadding="0" cellspacing="0" style="color:#ffffff;"> 
  27. <tbody> 
  28. <tr> 
  29. <td align="center" valign="middle" style="width:400px; color:#000000; font-size:13px; padding:0; text-align:justify; line-height:25px; margin: 0"  
  30.  
  31. background="http://static.wixstatic.com/media/470c77_1ff48e7d4bfc96c8d56709e23718fa96.jpg"> 
  32.   
  33. <p style="margin: 25px;">Gravity Off est un groupe de rock originaire de Paris formé en 2008. Le mélange des voix et des instruments donne naissance à des  
  34.  
  35. arrangements riches et colorés qui rendent les compositions de Gravity Off si efficaces.<br /><br /> 
  36.   
  37. Gravity Off c’est une heure de show, un groupe idéal pour les programmations rock et les premières parties. <br /><br /> 
  38.   
  39. <div align="center" style="font-size:16px;"><a href="http://www.gravity-off.com/">www.gravity-off.com</a></div></p> 
  40. </td> 
  41.   
  42. <td align="center" valign="middle" style="width:400px; background-color:#536375; color:#15203e; font-size:13px; padding:0; text-align:justify;  
  43.  
  44. line-height:25px; margin: 0"> 
  45.   
  46. <p style="margin: 25px;">Across The Other Moon est un groupe de rock français formé en 2007. 
  47. <br /><br />Présentant des compositions originales, mélodiques et rythmées, ATOM saura vous faire vibrer dès les premières notes. 
  48. La formation est composée de 4 membres: 2 Guitares/ Chant , Basse, Batterie.<br /> 
  49. <br /> 
  50. <div align="center" style="font-size:16px;"><a href="http://www.acrosstheothermoon.com/">www.acrosstheothermoon.com</a></div></p> 
  51.   
  52. </td> 
  53. </tr> 
  54. </tbody> 
  55. </table> 
  56.   
  57. <!-- Fin Intérieur --> 
  58.   
  59.   
  60. <!-- Liens --> 
  61.   
  62. <table width="800" cellpadding="0" cellspacing="0" style="color:#ffffff;"> 
  63. <tbody> 
  64. <tr> 
  65.   
  66. <td align="center" valign="top" style="width:400px;" background="http://static.wixstatic.com/media/470c77_1ff48e7d4bfc96c8d56709e23718fa96.jpg"> 
  67.   
  68. <table width="400" style="padding: 0px 33px 33px 33px"> 
  69.   
  70. <tbody> 
  71. <tr align="center"> 
  72.   
  73. <td align="left"> 
  74. <a href="https://soundcloud.com/gravity-off"><img src="http://www.iconsdb.com/icons/preview/000000/soundcloud-3-xxl.png" title="Soundcloud" alt="soundcloud"  
  75.  
  76. width="100"></a> 
  77. </td> 
  78.   
  79. <td align="center"> 
  80. <a href="http://www.facebook.com/gravityoffofficial"><img src="http://www.iconsdb.com/icons/preview/000000/facebook-3-xxl.png" title="Facebook"  
  81.  
  82. alt="facebook" width="100"></a> 
  83. </td> 
  84.   
  85. <td align="right"> 
  86. <a href="https://www.youtube.com/user/GravityOffofficial"><img src="http://www.iconsdb.com/icons/preview/000000/youtube-3-xxl.png" title="Youtube"  
  87.  
  88. alt="youtube" width="100"></a> 
  89. </td> 
  90.   
  91. </tr> 
  92. </tbody> 
  93. </table> 
  94.   
  95. </td> 
  96.   
  97.   
  98.   
  99. <td align="center" valign="top" style="width:400px; background-color:#536375;"> 
  100.   
  101. <table width="400" style="padding: 0px 33px 33px 33px"> 
  102. <tbody> 
  103. <tr align="center"> 
  104.   
  105. <td align="left"> 
  106. <a href="https://soundcloud.com/acrosstheothermoon"><img src="http://www.iconsdb.com/icons/preview/15203E/soundcloud-3-xxl.png" title="Soundcloud"  
  107.  
  108. alt="soundcloud" width="100"></a> 
  109. </td> 
  110.   
  111. <td align="center"> 
  112. <a href="http://www.facebook.com/acrosstheothermoon"><img src="http://www.iconsdb.com/icons/preview/15203E/facebook-3-xxl.png" title="Facebook"  
  113.  
  114. alt="facebook" width="100"></a> 
  115. </td> 
  116.   
  117. <td align="right"> 
  118. <a href="https://www.youtube.com/acrosstheothermoon"><img src="http://www.iconsdb.com/icons/preview/15203E/youtube-3-xxl.png" title="Youtube" alt="youtube"  
  119.  
  120. width="100"></a> 
  121. </td> 
  122.   
  123. </tr> 
  124. </tbody> 
  125. </table> 
  126.   
  127. </td> 
  128.   
  129. </tr> 
  130. </tbody> 
  131. </table> 
  132.   
  133. <!-- Fin Liens --> 
  134.   
  135.   
  136. <!-- Photos fin --> 
  137.   
  138. <table cellpadding="0" cellspacing="0" width="800"> 
  139. <tbody> 
  140. <tr> 
  141. <td valign="bottom" style="width:400px;" background="http://static.wixstatic.com/media/470c77_1ff48e7d4bfc96c8d56709e23718fa96.jpg"> 
  142. <img src="http://static.wixstatic.com/media/470c77_233eb630d65f34a2ca4db4d0cc4af5cd.jpg" width="400" align="bottom"> 
  143. </td> 
  144.   
  145. <td valign="middle" style="width:400px; background-color:#15203E;"> 
  146. <img src="http://static.wixstatic.com/media/470c77_8342f2a391cbd685208888dd90d7c06b.jpg" width="400"> 
  147. </td> 
  148. </tr> 
  149. </tbody> 
  150. </table> 
  151.   
  152. <!-- Fin Photos Fin --> 
  153.   
  154. </td></tr></tbody></table>


Message édité par rufo le 07-08-2013 à 15:09:31

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 09-08-2013 à 15:47:36    

Merci bien !
Effectivement finalement un ami m'a aidé entre temps.
Donc ouais le coup des padding, pas super comme solution. COmme je suis autodidacte je n'savais pas, et comme c'est marqué sur a peu près aucun site … Mais on apprend de ses erreurs.
 
Pour la taille des images, j'étais au fait, je me concentrais sur le code pour le moment, j'ai ensuite fait des versions réduites.

Reply

Marsh Posté le 09-08-2013 à 16:26:13    

Euh, le coup du pb du modèle boîte, si, c'est marqué sur pas mal de sites et c'est très connu comme pb :/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed