2016-08-08 13 views
0

HTMLニュースレターで問題が発生しました。 インターネットウェブサイトとしてコードを実行すると、すべてのことは明らかです。 しかし、Outlookでインポートすると、すべてのCSSがカウントされません。 それは正常ですか?ここに感謝のHTML電子メールが機能しない:/

Email here

HTML & CSS


 

 
    <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は外部CSSをサポートしていません。あなたはすべてのCSSインラインを書く必要があります –

+0

どうやってそれをしますか? – Miguel

+0

ここをクリックhttp://www.w3schools.com/css/css_howto.asp –

答えて

2

Outlook doesn't support background opacity

あなたが指定したコードは、(あなたの言ったように)ウェブサイトとして機能しますが、残念ながらほとんどの電子メールクライアント(Outlookだけではありません。メールは<div>の代わりに<table>をレイアウトに使用する必要があります。 Flexboxは電子メールでも機能しません。

メールコードより次のようになります。

<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> 

あなたがCSS that email clients supportを使用している間<table>秒で<div> Sを交換することにより、メールを再構築する場合、これはOutlookで表示の問題を解決し、他のどこでも必要があります。

関連する問題