2016-08-08 54 views
0

Ich habe ein Problem mit meinem HTML-Newsletter. Wenn Sie den Code als Internet-Website ausführen, ist alles klar. Aber wenn ich es in Outlook importiere, zählt das CSS nicht. Ist das normal? DanktenHTML-E-Mail funktioniert nicht:/

Email here

HTML & CSS hier


 

 
    <style> 
 
     body { 
 
      max-width: 600px; 
 
      background-color: rgb(67, 153, 186); 
 
     } 
 
     
 
     h1 { 
 
      color: rgb(214, 196, 0); 
 
     } 
 
     
 
     h2 { 
 
      font-weight: bold; 
 
     } 
 
     
 
     * { 
 
      font-family: "Univers LT 45", sans-serif; 
 
     } 
 
     
 
     p { 
 
      background-color: rgba(255, 255, 255, 0.2) 
 
     } 
 
     
 
     #NewsletterPRONA { 
 
      flex-direction: column; 
 
      rgb(67, 153, 186); 
 
     } 
 
     
 
     #news {} 
 
     
 
     #yellow { 
 
      background-color: rgb(214, 196, 0); 
 
      width: 100%; 
 
      margin-bottom: auto; 
 
      overflow: hidden; 
 
     } 
 
     
 
     #yellowL { 
 
      float: left; 
 
      width: 50%; 
 
     } 
 
     
 
     #yellowR { 
 
      position: relative; 
 
      float: right; 
 
      width: 50%; 
 
     } 
 
     
 
     #h1v2 { 
 
      color: rgb(67, 153, 186); 
 
      background-color: rgb(214, 196, 0); 
 
     } 
 
     
 
     #personnel { 
 
      flex-direction: column; 
 
     } 
 
     
 
     #qsum { 
 
      background-color: rgb(214, 196, 0); 
 
      overflow: hidden; 
 
     } 
 
     
 
     #divers { 
 
      overflow: hidden; 
 
     } 
 
    </style>

 

 
<body id="NewsletterPRONA"> 
 
    <div id="blue" style="background-color:rgb(67, 153, 186);"> 
 
    <div id="news"> 
 
     <h1>News</h1> 
 
     <p></p> 
 
    </div> 
 
    <div id="yellow"> 
 
     <h1 id="h1v2">Geschäftsverlauf/Déroulement des affaires</h1> 
 
     <div id="yellowL"> 
 
      <h1 id="h1v2">Offerten</h1> 
 
      <p> 
 

 
      </p> 
 
      <h1 id="h1v2">Projekte</h1> 
 
      <p> 
 

 
      </p> 
 
     </div> 
 
     <div id="yellowR"> 
 
      <h1 id="h1v2">Offres</h1> 
 
      <h2>Bruit</h2> 
 
      <p> 
 

 
      </p> 
 
      <h2>Sols</h2> 
 
      <p> 
 

 
      </p> 
 
      <h2>Déchets</h2> 
 
      <p> 
 

 
      </p> 
 
      <h2>EIE</h2> 
 
      <p> 
 

 
      </p> 
 
      <h2>Physique et acoustique du bâtiment</h2> 
 
      <p> 
 

 
      </p> 
 
      <h1 id="h1v2">Projets</h1> 
 
      <h2>Bruit</h2> 
 
      <p> 
 

 
      </p> 
 
     </div> 
 
    </div> 
 
    <div id="personnel"> 
 
     <h1>Personal/Personnel</h1> 
 
     <h2>Neueinstellungen/Nouveaux engagements</h2> 
 
     <p></p> 
 
     <h2>Austritte/Départs</h2> 
 
     <p></p> 
 
     <h2>Jubiläum/Jubilé</h2> 
 
     <p></p> 
 
     <h2>Geburtstage/Anniversaires</h2> 
 
     <p></p> 
 
    </div> 
 
    <div id="qsum"> 
 
     <h1 style="color: rgb(67, 153, 186);">QSUM/MQSE</h1> 
 
     <div id="yellowL"> 
 
      <p></p> 
 
     </div> 
 
     <div id="yellowR"> 
 
      <p></p> 
 
     </div> 
 
    </div> 
 
    <div id="divers"> 
 
     <h1>Diverses/Divers</h1> 
 
     <div id="yellowL"> 
 
      <p></p> 
 
     </div> 
 
     <div id="yellowR"> 
 
      <p></p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body>

+1

Outlook unterstützt nicht externe CSS Sie sollten alle CSS Inline schreiben –

+0

Wie machst du es? – Miguel

+0

lesen Sie diese http://www.w3schools.com/css/css_howto.asp –

Antwort

2

Outlook doesn't support background opacity.

Der von Ihnen angegebene Code funktioniert wie eine Website (wie Sie bereits sagten), wird aber leider in den meisten E-Mail-Clients (nicht nur Outlook) auseinanderfallen. E-Mails müssen <table> s für das Layout anstelle von <div> s verwenden. Flexbox funktioniert auch nicht in E-Mails.

E-Mail Code sieht mehr wie folgt aus:

<table cellpadding="0" cellspacing="0" border="0" align="center"> 
    <tr> 
    <td valign="top" style="vertical-align: top;background: #aaaaaa;"> 
     <span style="color: #333333;">text</span> 
    </td> 
    </tr> 
</table> 
<table cellpadding="0" cellspacing="0" border="0" align="center"> 
    <tr> 
    <td valign="top" style="vertical-align: top;"> 
     <img src="full path to image" alt="alt text" width="50" height="50"> 
    </td> 
    </tr> 
</table> 

Wenn Sie Ihre E-Mail wieder aufzubauen durch <div> s mit <table> s ersetzt, während CSS that email clients support verwenden, dies Ihre Probleme bei der Anzeige in Outlook lösen sollte und überall sonst.