2016-08-08 5 views
0

У меня проблема с моим бюллетенем HTML. Когда вы запускаете код как интернет-сайт, все понятно. Но когда я импортирую его в Outlook, все CSS не учитываются. Нормально ли это? Thank в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

внешний вид не поддерживает внешний CSS, вы должны написать все css inline –

+0

Как вы это делаете? – Miguel

+0

читайте это http://www.w3schools.com/css/css_howto.asp –

ответ

2

Outlook doesn't support background opacity.

Код, указанный вами, работает как веб-сайт (как вы сказали), но, к сожалению, он будет разваливаться на большинстве почтовых клиентов (а не только на Outlook). Письма должны использовать <table> s для размещения вместо <div> s. Flexbox не будет работать в электронных письмах.

Email код выглядит примерно так:

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

Если восстановить свою электронную почту, заменив <div> с с <table> с при использовании CSS that email clients support, это должно решить ваши проблемы с отображением в Outlook, и везде.

Смежные вопросы