Forums Développement Multimédia

Aller au contenu

PB images sur mailing

CODE HTML CSS

2 réponses à ce sujet

#1 julesinmontreal

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 19 October 2010 - 00:22 AM

Bonjour,

J'aurai besoins d'un coup de pouce sur la construction d'un mailing.
J'ai codé ma page comme ci-dessous.
Le rendu est parfait sur mail d'apple mais quand je me rend directement sur ma boite gmail... je rencontre quelques problèmes (voir image jointe)


<body style="padding:0px; margin:0px;  background-color: #e2e6d8;">

<div style="margin: 0pt auto; background-color: #e2e6d8; width: 800px; padding-bottom: 15px;">


         
                 
        <tr>  
          <td class="header">
                  <table width="800" height="50" border="0" cellspacing="0" cellpadding="0">
                     
                     
                     <tr>
                        <td valign="bottom" align="right">
                           <img src="http://www._v6_01.gif" width="800" height="150" alt="TEST">
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
           
         
         
           
           
             
           
           
           
            <tr>
               <td>
                 <table width="800" height="105" border="0" cellspacing="0" cellpadding="0">
                     
                     <tr>  
                       <td width="690" align="left" valign="top" background="http://www._v6_01-02.gif">
                         <p style=" font-family: 'Lucida Grande', Arial, sans-serif; font-size: 14px; font-weight: normal; color: #222222; margin: 0 0 10px 0; padding-left: 100px;
                                                        padding-right: 130px; text-align:justify; line-height:20px;"
>Bonjour, </br>
                           </p>
                          <p style=" font-family: 'Lucida Grande', Arial, sans-serif; font-size: 14px; font-weight: normal; color: #222222; margin: 0 0 10px 0; padding-left: 100px;
                                                        padding-right: 130px; text-align:justify; line-height:20px;"
>XXX est une jeune XX digitale.
                       Au mois d’XXX, nous proposons nos services XXXX </p></td>
                     </tr>
                  </table>
                 
               </td></tr>
               
               
               
               <tr>
               <td>
                  <table width="800" height="169" border="0" cellspacing="0" cellpadding="0">
                     
                     <tr>  
                        <td width="690" align="left"  valign="top" background="http://www._v6_03.gif">
                       
                        <ul style="
        list-style-type:none;"
>

<li style="background:transparent url(http://www./li_01.gif) no-repeat scroll 0 50%;
         font-family: 'Lucida Grande', Arial, sans-serif;
        border-bottom:1px dotted #BBBBBB;
        display:block;
        font-size: 14px;
        height:1%;
        line-height:1.2em;
        margin-left:80px;
        margin-right:280px;
        padding:10px 0 10px 35px;"
> Augmenter XXXX </li>

<li style="background:transparent url(http://www./li_02.gif) no-repeat scroll 0 50%;
         font-family: 'Lucida Grande', Arial, sans-serif;
        border-bottom:1px dotted #BBBBBB;
        display:block;
        font-size: 14px;
        height:1%;
        line-height:1.2em;
        margin-left:80px;
        margin-right:280px;
        padding:10px 0 10px 35px;"
> AméliorerXXX </li>

<li style="background:transparent url(http://www.li_03.gif) no-repeat scroll 0 50%;
         font-family: 'Lucida Grande', Arial, sans-serif;
        border-bottom:1px dotted #BBBBBB;
        display:block;
        font-size: 14px;
        height:1%;
        line-height:1.2em;
        margin-left:80px;
        margin-right:280px;
        padding:10px 0 10px 35px;"
> XXXX</li>


<li style="background:transparent url(http://www.li_04.gif) no-repeat scroll 0 50%;
         font-family: 'Lucida Grande', Arial, sans-serif;
        border-bottom:1px dotted #BBBBBB;
        display:block;
        font-size: 14px;
        height:1%;
        line-height:1.2em;
        margin-left:80px;
        margin-right:280px;
        padding:10px 0 10px 35px;"
> AXXX clients</li>
</ul>
                         
                         
                         
                         
                       </td>
                     </tr>
                  </table>
                 
               </td>              
          </tr>
           
               
            <tr>
               <td>
                 <table width="800" height="61" border="0" cellspacing="0" cellpadding="0">
                     
                     <tr>  
                        <td width="690" align="left" valign="top" background="http://www.chewcom.com/invitation/mailing_chewcom_v6_04.gif">
                       
                       
                       
                       
                     <p style=" font-family: 'Lucida Grande', Arial, sans-serif; font-size: 14px; font-weight: normal; color: #222222; margin: 0 0 10px 0; padding-left: 100px;
                                                        padding-right: 130px; text-align:justify; line-height:20px;"
>Nous serons élaborer, XXX. Alors prenez le cap ! </p>
                       
                       
                       </td>
                     </tr>
                  </table>
                 
               </td></tr>
           
           
           
             <tr>
               <td>
                 <table width="800" height="149" border="0" cellspacing="0" cellpadding="0">
                     
                     <tr>  
                        <td width="690" align="left" class="mainbar2" valign="top" background="http://www.XXX v6_05.gif">
                       
                       
                       
                       
                       
                       <ul style="
        list-style-type:none;"
>

<li style="font-family: 'Lucida Grande', Arial, sans-serif;
        display:block;
        font-size: 13px;
        line-height:12px;
        margin-left:80px;
        padding:6px 0 6px 60px;"
>Julien XXX | XXX </li>
<li style="font-family: 'Lucida Grande', Arial, sans-serif;
        display:block;
        font-size: 13px;
        line-height:12px;
        margin-left:80px;
        padding:6px 0 6px 60px;"
>hello@XXX.com</li>
<li style="font-family: 'Lucida Grande', Arial, sans-serif;
        display:block;
        font-size: 13px;
        line-height:12px;
        margin-left:80px;
        padding:6px 0 6px 60px;"
>Tél. : XXX 0.3004</li>
<li style="font-family: 'Lucida Grande', Arial, sans-serif;
        display:block;
        font-size: 13px;
        line-height:12px;
        margin-left:80px;
        padding:6px 0 6px 60px;"
>www.XXXX.com</li>
</ul>
                       
                       
                       </td>
                     </tr>
                  </table>
                 
               </td></tr>
           
           
                     
        <tr>  
          <td class="header2">
                  <table width="800" height="262" border="0" cellspacing="0" cellpadding="0">
                     
                     
                     <tr>
                        <td valign="bottom" align="right">
                           <img src="http://www.mailing_chewcom_v6_04-06.gif">
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
           
           
           
           
           
           
           
           
           
           
            <tr>
               <td align="center" class="footer">
                 
                 
                  <p>Ce message a été envoyé par XXXX </p>
              </td>
            </tr>

</div>

</body>
</html>

 

Quelqu'un serait d'ou viennent les écarts entre images ?

Merci beaucoup pour votre aide !

Jules

#2 julesinmontreal

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 19 October 2010 - 04:17 AM

Voici le rendu en pièce jointe avec le texte à été caché.

Fichier(s) joint(s)



#3 jean.ceugniet

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 391 messages

Posté 04 November 2010 - 22:47 PM

Salut,

C'est normal que dans ton code le premier niveau de tr ne soit pas contenu dans un table ?



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP