Newsletter in HTML via Outlook

  • Hallo zusammen,

    ich habe einen HTML-Code für den Newsletter in unserer Firma erstellt.

    Oben steht der Header und ganz am Schluss steht der Footer.

    Der erste Text ist ein einspaltiger Beitrag, auf denn dann zweispaltige Beiträge in der Form - Bild links, Text rechts folgen.


    Jetzt habe ich zwei Probleme. Einerseits kriege ich es nicht hin, dass bei meinem zweispaltigen Bereich die Tabelle rechts nicht über die angegebene maximale Breite von 600px läuft und andererseits habe ich das Problem, dass sich die Fusszeile gleich an die rechte Tabellenspalte heftet statt wieder über die ganze Breite als Abschluss zu laufen.


    Kann mir da jemand helfen? Sorry, ich bin noch ein Neuling im html Programmieren und habe mir die Dinge aus dem Internet zusammen gesucht und viel selbst ausprobiert.


    Ich poste euch hier unten gleich meinen Code hin. Das Ganze habe ich im Dreamwaver erstellt.


    <!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" />

    <!-- Das ist der Titel der Datei -->

    <title>Active Safety - der sichere Schutz im Alltag</title>



    <!-- Hier steht das SEA-Logo oben links -->

    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">

    <tr>

    <td class="innerpadding borderbottom">

    <p><img src="SEA_f_mClaim.png" width="250" height="" align="left" alt="SEA-Logo" /></p>

    </td>

    </tr>


    <!-- Hier beginnt die Kopfzeile, blauer Hintergrund mit weissem Text, responsive-fähig-->

    <tr>

    <td height="70" style="padding: 30px 30px 30px 30px;" class="header" bgcolor="#232c77">

    <p align="center"><font color="#ffffff">Ein Schlüssel öffnet Tür und Tor – <br>Versuchen Sie Ihr Glück bei uns am Messestand!</font></p>

    </td>

    </tr>

    </table>

    <style type="text/css">

    @media only screen and (min-device-width: 601px)

    { .content {width: 600px !important;}

    body {margin: 0; padding: 0; min-width: 100%!important;}

    .content {width: 100%; max-width: 600px;}

    .col425 {width: 425px!important;}

    .col380 {width: 380px!important;}

    .innerpadding {padding: 30px 30px 30px 30px;}

    .borderbottom {border-bottom: 1px solid #f2eeed;}

    .footer {padding: 20px 30px 15px 0;}

    .footercopy a {color: #ffffff; text-decoration: underline;}

    }

    </style>

    </head>



    <!-- Hier beginnt die Einleitung, 1-spaltiger Artikel, responsive-fähig -->

    <body bgcolor="#ffffff">

    <!-- 4:3 aspect ratio -->

    <div class="embed-responsive embed-responsive-4by3">

    <iframe class="embed-responsive-item" src="..."></iframe>

    <table width="100%" class="content" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">

    <tr>

    <td>

    <table width="100%" class="content" align="center" border="0" cellpadding="0" cellspacing="0" >

    <tr>

    <td>


    <p>Sehr geehrte Damen und Herren</p>


    <p>Vor einigen Tagen haben Sie von uns ein Mailing zum Thema "aktiver Kopierschutz" erhalten, in welchem ein Schlüssel mit eben diesem Kopierschutz sowie ein Ticket für einen kostenlosen Eintritt an die Messe in Wettingen zu finden war.</p>


    <p>Wir laden Sie herzlich dazu ein, Ihr Glück bei uns am Stand 309 in der Halle 3 zu versuchen. Bringen Sie den Schlüssel mit und lassen Sie sich überraschen welche Türe damit geöffnet werden kann.</p>


    <p>Gerne zeigen wir Ihnen unsere Lösungen für den sicheren Alltag. Ob mit Kopierschutz, mit Bohrschutz oder ganz nach Ihrem Wunsch helfen wir Ihnen die richtigen Schliessungen für Ihre Kunden zu finden.</p>


    <p>Wir freuen uns, Sie in Wettingen in der Halle 3, am Stand 309 zu begrüssen. Die Messe findet vom 06. – 09. April 2017 statt. Sollten Sie in diesem Zeitraum verhindert sein, uns jedoch trotzdem gerne kennen lernen wollen, finden Sie uns auch an der "Bauen und modernisieren" in Zürich (07. – 10.09.2017) oder an der "Bauen und Wohnen" in Luzern (05. – 08.10.2017).</p>


    <p>Natürlich dürfen Sie auch jederzeit einen Blick hinter unsere Kulissen werfen oder in einem persönlichen Beratungsgespräch mehr über uns erfahren. Kontaktieren Sie hierzu Herrn Roman Hesse via roman.hesse@sea.ch oder via Telefon unter 031 / 915 20 20. </p>


    <p>Freundliche Grüsse<br>

    SEA Schliess-Systeme AG</p>

    </td>

    </tr>

    </table>

    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">

    <tr>

    <td class="innerpadding borderbottom">

    <p><img src="rhes_schwarz.png" width="200" height="" alt=""/><br>

    Roman Hesse<br>

    <font size="1px">Leiter Verkauf</font></p>

    </td>

    </tr>

    </table>

    </td>

    </tr>

    </table>

    </div>

    <p></p>

    <p></p>

    <!-- Hier beginnt der Mittelteil mit Bild links und Textblock rechts, responsive-fähig, jeoch Textblock rechts noch zu breit-->


    <!-- Bild links -->

    <table width="150" align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">

    <!-- 4:3 aspect ratio -->

    <div class="embed-responsive embed-responsive-4by3">

    <iframe class="embed-responsive-item" src="..."></iframe>

    <tr>

    <td class="innerpadding borderbottom">

    <table width="115" align="left">

    <tr>

    <td height="auto" style="padding: 0 20px 20px 0;">

    <img src="fscblack.png" width="115" height="auto" border="0" alt="FSC-Signet" />

    <!-- alt: Bildbeschreibung, falls Bild nicht angezeigt wird. Muss sinnvoll ausgefüllt sein -->

    <!-- png als Bildformat vermeiden -->

    </td>

    </tr>

    </table>

    </td>

    </tr>

    </div>

    </table>

    <!-- Textblock rechts -->

    <table class="col425" width="425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px; padding: 20px 0 0 0">

    <!-- 4:3 aspect ratio -->

    <div class="embed-responsive embed-responsive-4by3">

    <iframe class="embed-responsive-item" src="..."></iframe>

    <tr>

    <td class="innerpadding borderbottom">

    <table width="100%" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td class="body">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

    </td>

    </tr>

    </table>

    </td>

    </tr>

    </div>

    </table>

    <!-- Hier beginnt die Fusszeile, responsive-fähig, jedoch noch an Texblock rechts gebunden-->

    <footer>

    <table width="100%" border="0" cellpadding="0" cellspacing="0">

    <div class="embed-responsive embed-responsive-4by3">

    <tr>

    <td class="footer" align="left" style="padding: 1px 1px 1px 1px;" bgcolor="#232c77">

    <table width="100%" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td align="left" class="footer" style="padding: 1px 20px 1px 20px;"> <!--oben rechts unten links-->

    <p><font size="1px" color="#ffffff">SEA Schliess-Systeme AG – Lätternweg 30 – 3052 Zollikofen – Telefon +41 (0)31 915 20 20 – Fax +41 (0)31 915 20 00 – </font><a href="http://www.sea.ch/default.aspx?id=62C264B96DE9F50FEDF071F667FD870D" title="SEA-Webseite" target="new"><font size="1px" text-decoration="underline" color="#ffffff">http://www.sea.ch</font></a></p>

    </td>

    </tr>

    </table>

    </td>

    </tr>

    </div>

    </table>

    </footer>

    </body>

    </html>


    Vielen Dank für euer Hilfe.

    Gruess

    Mia

  • Hey,


    den code welchen du dir zusammengestellt hast, bzw. geschrieben ist, ist veraltet. Heute wird HTML5 genutzt.


    Ich habe mir mal die Mühe gemacht und es nachgebaut. Es kann sein, dass ich ab und zu nicht die richtigen HTML-Kontainer einsetze oder etwas anderes falsch mache. Wenn das so ist, würde ich mich freuen wenn ein Profi es mir sagt. So sieht es dann aus: https://jsfiddle.net/99fmh6v4/6/


    Hier der Code:

    Dieser Beitrag wurde bereits 4 Mal editiert, zuletzt von Stef () aus folgendem Grund: Änderungen CSS