2017-07-01 1 views
0

Ich mache eine HTML-E-Mail, und ich habe die meisten Elemente so angezeigt, wie sie sollten. Aber aus irgendeinem Grund, ein Element, das ich versuche einzufügen, eine kleine Box mit einer Adresse und einem Kontakt zeigt sich nicht wie es sollte. Screencap of fileWie stelle ich dieses Element so dar, wie es in diesem Code aussehen sollte?

Dieser graue Balken am unteren Rand mit der Adresse sollte die gleiche Breite wie das weiße Hauptfeld haben und sollte von blau umgeben sein.

Mein Code ist:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>BigParser</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
    </head> 
    <body style="margin: 0; padding: 0;"> 
    <table border="1" cellpadding="0" cellspacing="0" width="100%"> 
     <!--main background color, size, etc.--> 
     <tr bgcolor= "#21A1EC"> 
     <td align="center" style="padding: 40px 0 30px 0;"> 
      <!--this BigParser logo at the top--> 
      <img src="bigparser.gif" width="186" height="43" style="display:block;" /> 
     </td> 
     </tr> 
     <tr bgcolor= "#21A1EC"> 
     <td align="center"> 
      <table border="1" cellpadding="0" cellspacing="0" width="600"> 
      <!--creates main padded content table--> 
      <tr width=100% bgcolor= "#ffffff"> 
       <td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;"> 
       <!--title formatting--> 
       Lorem ipsum<!--do not delete--> &nbsp&nbsp&nbsp&nbsp<!-- centering title fix--> 
       </td> 
      </tr> 
      <tr width="100%" bgcolor= "#ffffff"> 
       <td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;"> 
       <!--content formatting--> 
       content text 
       </td> 
      </tr> 
      <tr> 
       <!--this is the unsub/links box, contains the unsubscribe and links to social media--> 
       <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> 
       <tr align="center" > 
        <!--this contains unsub link and copyright--> 
        <td bgcolor="50B54D" width="60%"> 
        unsub link 
        </td> 
        <td bgcolor="EC552B" width="40%"> 
        social media links 
        </td> 
       </tr> 
       </table> 
      </tr> 
      <tr bgcolor="EEEFF1" align="left" style="font-size:15;"> 
       <td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;"> 
       BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191 
       </td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
    </table> 
    </body> 
</html> 

jedoch die Adressleiste korrekt zu formatieren angezeigt wird, wenn ich es über den grünen und orangefarbenen Boxen bewegen, HTML works when address is above

<table border="1" cellpadding="0" cellspacing="0" width="600"> 
      <!--creates main padded content table--> 
      <tr width=100% bgcolor= "#ffffff"> 
       <td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;"> 
       <!--title formatting--> 
       Lorem ipsum<!--do not delete--> &nbsp&nbsp&nbsp&nbsp<!-- centering title fix--> 
       </td> 
      </tr> 
      <tr width="100%" bgcolor= "#ffffff"> 
       <td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;"> 
       <!--content formatting--> 
       content text 
       </td> 
      </tr> 
      <tr bgcolor="EEEFF1" align="left" style="font-size:15;"> 
       <td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;"> 
       BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191 
       </td> 
      </tr> 
      <tr> 
       <!--this is the unsub/links box, contains the unsubscribe and links to social media--> 
       <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> 
       <tr align="center" > 
        <!--this contains unsub link and copyright--> 
        <td bgcolor="50B54D" width="60%"> 
        unsub link 
        </td> 
        <td bgcolor="EC552B" width="40%"> 
        social media links 
        </td> 
       </tr> 
       </table> 
      </tr>   
      </table> 

Ich bin nicht sicher, warum dies passiert, wie ändere ich den Code, so dass die Adresse unter den grünen und orangefarbenen Kästchen erscheint, aber die gleiche Breite wie die restlichen Elemente darüber behält?

Antwort

2

Verschieben Sie die Adresszeile in die Tabelle für den Link "Unsub"/"Social Media Links" und geben Sie colspan="2" ein. Ich hoffe, das ist, was Sie für

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
    <title>BigParser</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
</head> 
 

 
<body style="margin: 0; padding: 0;"> 
 
    <table border="1" cellpadding="0" cellspacing="0" width="100%"> 
 
    <!--main background color, size, etc.--> 
 
    <tr bgcolor="#21A1EC"> 
 
     <td align="center" style="padding: 40px 0 30px 0;"> 
 
     <!--this BigParser logo at the top--> 
 
     <img src="bigparser.gif" width="186" height="43" style="display:block;" /> 
 
     </td> 
 
    </tr> 
 
    <tr bgcolor="#21A1EC"> 
 
     <td align="center"> 
 
     <table border="1" cellpadding="0" cellspacing="0" width="600"> 
 
      <!--creates main padded content table--> 
 
      <tr width=100% bgcolor="#ffffff"> 
 
      <td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;"> 
 
       <!--title formatting--> 
 
       Lorem ipsum 
 
       <!--do not delete-->&nbsp&nbsp&nbsp&nbsp 
 
       <!-- centering title fix--> 
 
      </td> 
 
      </tr> 
 
      <tr width="100%" bgcolor="#ffffff"> 
 
      <td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;"> 
 
       <!--content formatting--> 
 
       content text 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td align="left" valign="top"> 
 
      <!--this is the unsub/links box, contains the unsubscribe and links to social media--> 
 
      <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> 
 
       <tr align="center"> 
 
       <!--this contains unsub link and copyright--> 
 
       <td bgcolor="#50B54D" width="60%"> 
 
        unsub link 
 
       </td> 
 
       <td bgcolor="#EC552B" width="40%"> 
 
        social media links 
 
       </td> 
 
       </tr> 
 
       <tr bgcolor="#EEEFF1" align="left" style="font-size:15;"> 
 
      <td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;" colspan="2"> 
 
       BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191 
 
      </td> 
 
      </tr> 
 
      </table> 
 
      </td> 
 
      </tr> 
 

 
     </table> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

+0

Danke fragen! Es funktioniert jetzt gut. –

+0

Etwas zu beachten: Colspan funktioniert nicht gut mit ein paar E-Mail-Clients. – Syfer

+0

Es gibt ein paar Fehler in Ihrem Code: Sie verwenden Farben ohne Hash im Wert, Ihre Tabellenstruktur ist falsch für den Zusatz, den Sie zum Code gemacht haben (Tabellen können nicht in einem tr sitzen). Wenn Sie eine Antwort geben, versuchen Sie, den Code der Person so zu verbessern, dass es ihnen in Zukunft leicht fällt und sie nicht immer die gleichen Fehler machen. – Syfer

Verwandte Themen