Ich kann diesen Header nicht in einer HTML-E-Mail arbeiten

Ich versuche, eine Vorlage auf MailChimp zu machen, aber ich kann es nicht richtig stylen. Es gibt jedoch ein paar Vorbehalte: Die CSS-Stile müssen inline sein und müssen als <table> Tags strukturiert sein.Ich kann diesen Header nicht in einer HTML-E-Mail arbeiten

This is what I have so far

This is the end-goal

Hier ist mein Code so weit:

<section id="header" style="background-color: #148e97;"> 
    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"> 
     <tr> 
      <td align="center" valign="top"> 
       <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailHeader"> 
        <tr> 
         <td align="right" valign=""> 
          <div class="socialMediaIcons"> 
          <img src="img/facebook.png"/> 
          <img src="img/twitter.png"/> 
          <img src="img/mail.png"/> 
          <img src="img/linkedin.png"/> 
          </div> 
         </td> 
        </tr> 
       </table> 
       <table id="title" width="500"> 
        <tr> 
        <td align="left" valign=""> 
         <img src="img/logo.png"/> 
        </td> 
        <td style=""> 
         <h1 style="text-align: right; " 
        style="font-family: arial;">Brand USA E-News -- April 2016</h1> 
        </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
    </section>

Quelle

2016-05-17 Gabriel Rivera

Warum ist es in Tabellen? - Was ist dein CSS? – Andrew

@Andrew-Tabellen sind die einzige Möglichkeit, HTML-E-Mails realistisch zu formatieren. Das und Inline-Styling ... daher sollte es kein CSS-Stylesheet geben, es sollten alle Inline-Style-Tags sein. – Martin

Für das OP können Sie davon profitieren, HTML5-Symantiken ('section') aus Ihrem Code als HTML-E-Mail zu entfernen ist etwas, das in der HTML Version 3 oder Version 4.0 bestenfalls zurück steckt. – Martin

Wenn HTML-E-Mails erstellen, müssen Sie sich in der Zeit zurück zu transportieren, zu einer Zeit, als Internet Explorer 6 war cool.

Sie können <section id="header"> oder class="socialMediaIcons" nicht verwenden, da nicht alle E-Mail-Clients den Tag <style> unterstützen. HTML5-Elemente werden am meisten nicht unterstützt und Ihr CSS muss inline und mit dem Attribut style="..." verwendet werden. Es gibt eine Menge von mixed support for CSS in E-Mail-Clients, so dass Sie gezwungen sind, für den kleinsten gemeinsamen Nenner zu sorgen.

Der folgende Code gibt Ihnen einen Start Punkt dafür, wie Ihr Layout zu erstellen:

<html> 
    <body style="margin: 0; padding:0"> 
     <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff"> 
      <tr> 
       <td valign="center"> 
        <div style="background-color: #148e97; width:660px; margin:auto;"> 
         <table border="0" cellpadding="0" cellspacing="0" height="100%" width="660" bgcolor="#148e97"> 
          <tr> 
           <td width="30"> 
            <img src="http://placehold.it/1x1" width="30" alt="Spacer"> 
           </td> 
           <td width="130"> 
            <img src="http://placehold.it/130x115" alt="Logo"> 
           </td> 
           <td valign="top" width="500"> 
            <table border="0" cellpadding="0" cellspacing="0" height="100%" width="500"> 
             <tr> 
              <td> 
               <img src="http://placehold.it/1x1" width="1" height="20" alt="Spacer"> 
              </td> 
             </tr> 
             <tr> 
              <td align="right"> 
               <div class="socialMediaIcons"> 
                <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" /> 
                <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" /> 
                <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" /> 
                <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" /> 
               </div> 
              </td> 
             </tr> 
             <tr> 
              <td align="right"> 
               <h1 style="text-align: right; font-family: arial; color: #fff;">Brand USA E-News -- April 2016</h1> 
              </td> 
             </tr> 
            </table> 
           </td> 
           <td width="30"><img src="http://placehold.it/1x1" width="30" alt="Spacer"></td> 
          </tr> 
         </table> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

Eine Sache, werden Sie feststellen, es gibt eine Menge von <table> Tags in anderen <table> Tags innerhalb noch mehr <table> Stichworte. Die Dinge werden unordentlich.

Ich habe die alte Schule Technik der spacer.gif (mit http://placehold.it/1x1 anstelle eines 1x1.gif Bild) verwendet wird, die nicht mehr in diesen Tagen benötigt, wenn Websites bauen.

Hoffentlich setzt dieser Code Sie auf dem richtigen Weg. Ich habe HTML-E-Mails seit über 5 Jahren nicht mehr erstellt, daher bin ich etwas eingerostet.

Quelle

2016-05-17 13:45:16

Gute Antwort. Die Sache ist, dass Sie HTML-E-Mails seit 5 Jahren nicht mehr erstellt haben, aber in diesen fünf Jahren * hat sich nichts für HTML-E-Mails geändert *! Jeder andere Teil des Internets scheint sich zu entwickeln, mit Ausnahme von E-Mails .... – Martin

Vielen Dank Kirk, das hilft mir wirklich, die Verrücktheit des Tabellenbeginns zu verstehen, haha. –

@Martin haha, guter Punkt! –

Ich kann diesen Header nicht in einer HTML-E-Mail arbeiten

Antwort

Verwandte Themen