Bonsoir tout le monde =)

J'ai un petit problème.. J’essaye de faire une "newsletter " avec ce que je connais, pour l'orchestre d'harmonie dont je fais partie. Le problème est quelle n'a pas du tout la même "tête" lorsque je la regarde dans mon navigateur ou lorsque je l'envoie par mail (ce qui est quand même la ou il y aura le plus de vue..). J'aurais donc aimé savoir si vous saviez pourquoi, si il y a certaines règles à respecter pour que le code html est le même visuel dans une page "normale" et dans la boite mail?

Voici mon code :

Code:

<div style="height:100%; width:100%; margin-bottom:0px; margin-top:0px; margin-left:-370px, margin-left:-370px; margin-right:0px; right:50% text-align:center;" align="center">    <table style="height:100%; width:740px;">    <tr><td style="text-align:center; " align="center">       <div style="background:#652416; width:740px; min-height:90%; border-radius:10px 10px 10px 10px; padding-left:10px; padding-right:10px; position:relative; clear:both;">          <br />          <center><div style="background:#B02220; width:670px; height:55px; border-radius:10px 10px 10px 10px; padding-left:10px; padding-right:10px; position:relative; clear:both;">             <table style="height:100%;">                <tr><td style="text-align:center;">                   <font size="5"><font color="#ffffff"><strong>Harmnonie de Vesoul</strong></font></font><br />                   <font size="3"><font color="#f8aaaa">Newsletter n°1 (2015)</font></font>                </td></tr>             </table>          </div></center>          <img style="border-radius:9px; width:auto; height:auto; max-width:700px; max-height:160px;" src="http://harmonievesoul.com/images/banderoletest2.png" alt="Harmonie de Vesoul">          <br />          <table>          <tr>          <td style="vertical-align: top; width=247px;">             <center><div style="background:#541b0f; width:240px;">             <font size="5px"><font color="#ffffff">PROCHAINES PRESTATIONS</font></font></center>             </div>             <center>                                          <img  src="http://harmonievesoul.com/images/punkt.jpg"  style="vertical-align:middle;" alt="" width="18" height="13" /><font size="3"><font color="#e97f7f">Concert n°1</font></font><br />                <img  src="http://harmonievesoul.com/images/punkt.jpg" style="vertical-align:middle;" alt="" width="18" height="13" /><font size="3"><font color="#e97f7f">Concert n°2</font></font><br />                <img  src="http://harmonievesoul.com/images/punkt.jpg" style="vertical-align:middle;" alt="" width="18" height="13" /><font size="3"><font color="#e97f7f">Concert n°3</font></font><br />                <HR style="width:80%; color:#CF2828; background:#CF2828;">                <div style="width:230px; font-size: 12px;" align="justify" ><font color="#ffffff">Vous recevez cette newsletter car vous êtes enregistré sur</font> <a style="color: #e97f7f;" href="http://harmonievesoul.com/">http://harmonievesoul.com</a><font color="#ffffff">.Vous pouvez voir ce message dans votre</font> <a style="color: #e97f7f;" href="http://harmonievesoul.com/Newsletter2015">navigateur</a><font color="#ffffff">.</font></div>                <HR style="width:80%; color:#CF2828; background:#CF2828;">                                <div style="font-size: 14px;"><font color="#ffffff">Suivez-nous:<br /></font></div>                                <table>                   <tr>                   <td style="text-align:center;">                   <a style="border: none;" href="https://www.facebook.com/HarmoniedeVesoul"><img style="border-radius:9px; width:auto; height:auto; max-width:50px; max-height:50px;" src="http://harmonievesoul.com/images/facebook.png" alt="Facebook">                   </td>                   <td style="text-align:center;">                   <a style="border: none;" href="https://plus.google.com/+HarmonievesoulMus"><img style="border-radius:9px; width:auto; height:auto; max-width:50px; max-height:50px;" src="http://harmonievesoul.com/images/googleplus.png" alt="Google+">                   </td>                   <td style="text-align:center;">                   <a style="border: none;" href="https://www.youtube.com/channel/UCBaf0Y4-VMWfUIiC18hGhSw"><img style="border-radius:9px; width:auto; height:auto; max-width:50px; max-height:50px;" src="http://harmonievesoul.com/images/youtube.png" alt="Youtube">                   </td>                   </tr>                </table>                             </center>          </td>                                        <td style="vertical-align: center; width=490px; text-align:center;" align="center">          <center>          <h2 style="font-size: 23px; font-weight: normal; color: #ffffff;">Bla bla bla b la</h2>          <div style="font-size: 18px; color: #ffffff;">          <HR style="width:80%; color:#CF2828; background:#CF2828;">          Bla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b la          </div>          <br />          <h2 style="font-size: 23px; font-weight: normal; color: #ffffff;">Titre deux</h2>          <div style="font-size: 18px; color: #ffffff;">          <HR style="width:80%; color:#CF2828; background:#CF2828;">          Bla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b la          </div>          <br />          <h2 style="font-size: 23px; font-weight: normal; color: #ffffff;">Titre 3</h2>          <div style="font-size: 18px; color: #ffffff;">          <HR style="width:80%; color:#CF2828; background:#CF2828;">          Bla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b laBla bla bla b la          </div>                    </center>          </td>          </tr>          </table>                    <br />                                        <center><div style="background:#B02220; width:470px; height:18px; border-radius:10px 10px 10px 10px; padding-left:10px; padding-right:10px; position:relative; clear:both;">             <table style="height:100%;">                <tr><td style="text-align:center;">                   <div style="font-size: 10px; ">Vous ne voulez plus recevoir cette Newsletter? Contacter nous grâce aux moyens indiqués sur cette <a style="color: #e97f7f;" href="http://harmonievesoul.com/Contacts">page</a>.</div>                </td></tr>             </table>          </div></center>                                       <br />                    <div style="background:#652416; width:100%; height:30px;">             <font size="3"><font color="#f8aaaa">© Orchestre Municipal d’Harmonie Ville de Vesoul et S.N.C.F</font></font>          </div>              </div>        </td></tr>    </table> </div>

Merci par avance pour votre aide,
Cordialement,
Flo

Bonsoir Anthony,

Merci pour la proposition, mais l'association n'a pas les moyens de se payer les services d'un professionnel..

Merci quand même,
Cordialement,
Flo