it-swarm.com.de

e-Mail in Outlook.com zentrieren

Ich habe eine sehr einfache HTML-E-Mail erstellt. http://staging.xhtml-lab.com/mailtest/

Es funktioniert gut in allen E-Mail-Clients, außer in hotmail.com/Outlook.com

in hotmail ist die E-Mail linksbündig ausgerichtet, sie sollte zentriert bleiben.

Ich habe folgenden Code hinzugefügt, wie von emailology.org vorgeschlagen, er hat jedoch keine Auswirkungen.

<style type=“text/css”>
/**This is to overwrite Hotmail’s Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a} 
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
p {margin-bottom: 0}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
/**This is to center your email in Hotmail************/
.ExternalClass {width: 100%;}
</style> 

Irgendwelche Vorschläge, was ich sonst noch tun kann, um das E-Mail-Zentrum auszurichten?

15
Alok Jain

Dies sollte Ihnen eine zentrierte E-Mail geben:

<table style="width: 100%; background: red;">
  <tr>
    <td>
      <center>
        <table style="width: 640px; background: blue; margin: 0 auto; text-align: left;">
          <tr>
            <td>
              Your content here
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

Das center- Tag wird von Outlook und Outlook.com benötigt. Andere Clients verwenden das Attribut margin. In einigen Clients wird der Text nach dem center- Tag zentriert. Daher ist das text-align-Attribut erforderlich.

Wenn die Breite abhängig von der Bildschirmgröße variabel sein soll, verwenden Sie den folgenden Code:

<table style="width: 100%; background: red;">
  <tr>
    <td>
      <center>
        <!--[if mso]>
        <table style="width: 640px;"><tr><td>
        <![endif]-->
        <div style="max-width: 800px; margin: 0 auto;">
          <table style="background: blue; text-align: left;">
            <tr>
              <td>
                Your content here
              </td>
            </tr>
          </table>
        </div>
      </center>
      <!--[if mso]>
      </td></tr></table>
      <![endif]--> 
    </td>
  </tr>
</table>

Outlook unterstützt max-width nicht und daher ist die Größe für Outlook auf 640px festgelegt. Bei allen anderen Clients entspricht die Breite der E-Mail der des Anzeigefensters, jedoch maximal 800 Pixel.

Bitte lassen Sie mich wissen, wenn Sie einen Kunden finden, bei dem diese Lösungen nicht funktionieren, sodass wir eine Lösung finden können, die mit so vielen Kunden wie möglich funktioniert.

32
Magnar Myrtveit

Ich habe hier eine Version erstellt, die ich als Ausgangspunkt für alle meine E-Mails verwende. Es funktioniert zu 100% auf allen wichtigen E-Mail-Clients:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head>
<body style="margin: 0px; padding: 0px background-color: #FFFFFF;" bgcolor="#FFFFFF"><!-- << bg color for forwarding (leave white) // main bg color >> --><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td>
<!-- CENTER FLOAT WIDTH -->
<table width="600" border="0" valign="top" align="center" cellpadding="0" cellspacing="0"><tr><td><!-- Master Width of the center panel -->
preheader...
<!-- CENTER PANEL BG COLOR (to hide separation of tables on email forward from Outlook (known issue) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td><!-- Master Color of the center panel -->

content...

<!-- /CENTER BG COLOR -->
</td></tr></table>

<!-- /CENTER FLOAT WIDTH -->
</td></tr></table>
<!-- /CENTER FLOAT -->
</td></tr></table></body></html>

Es hat einen eingebauten weißen Hintergrund, wenn jemand die E-Mail weiterleitet (er kann auf Weiß tippen, während der Hintergrund für den HTML-Teil farbig bleibt). Das Hauptfenster ist außerdem mit einer Grundfarbe festgelegt, da bei der Weiterleitung von Tabellen Lücken zwischen Tabellen eingefügt werden.

Hoffentlich hilft das. 

3
John

Sie können Ihre E-Mail-Vorlage auch zentrieren, indem Sie align="center" zu Ihrem Haupttabellen-Tag hinzufügen:

    <body>
      <table align="center">
        <tr>
          <td style="width:600px;">
            <!-- content -->
          </td>
        </tr>
      </table>
   </body>
0
Darryl Mendonez