Newsletter in HTML via Outlook

Smue · 28. Juni 2017

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

<head>

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

<tr>

</td>

</tr>

<tr>

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

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

<tr>

<td>

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

<tr>

Roman Hesse<br>

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

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

<p></p>

<tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</div>

</table>

<tr>

<tr>

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>

<tr>

<tr>

<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

Stef · 28. Juni 2017

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:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Active Safety - der sichere Schutz im Alltag</title>
   
</head>
<body>
  
    <header id="kopf">
        <img id="headpicture" src="test.jpg" alt="test">
            <div id="ueberschrift">
                <p>Ein Schlüssel öffnet Tür und Tor - <br> Versuchen Sie Ihr Glück bei uns am Messestand! </p>
            </div>
    </header>

        <aside id="iframe">
            <iframe src="http://www.sprichwort-des-tages.de/zitat.htm"></iframe>
        </aside>
    
    <main>
    
            <section id="newsletterText">
                <article>
                    <p>Sehr geehrte Damen und Herren<br><br>
                    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.<br><br>
                

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

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

                
                    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).<br><br>
                

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


                    Freundliche Grüsse <br> SEA Schliess-Systeme AG</p>
                </article>
                <div id="bild_herr_hesse">
                    <figure>
                        <img src="name.jpg" alt="rhes_schwarz">
                        <figcaption>Roman Hesse<br>Leiter Verkauf</figcaption>
                    </figure>
                </div>

                

            </section>

            <div>
                <iframe class="embed-responsive-item" src="http://www.sprichwort-des-tages.de/zitat.htm"></iframe>
            </div>

            <section id="fscSignet">
                <figure>
                    <img src="name.jpg" alt="FSC-Signet">
                    <figcaption>FSC-Signet</figcaption>
                </figure>
            </section>

            <div>
                <iframe class="embed-responsive-item" src="http://www.sprichwort-des-tages.de/zitat.htm"></iframe>
            </div>

            <section id="text">
                <p>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.</p>
            </section>
    </main>
    <footer id="foot">
        <p>SEA Schliess-Systeme AG – Lätternweg 30 – 3052 Zollikofen – Telefon +41 (0)31 915 20 20 – Fax +41 (0)31 915 20 00  –  <a id="hplink" href="http://www.sea.ch/default.aspx?id=62C264B96DE9F50FEDF071F667FD870D" title="SEA-Webseite" target="_blank">http://www.sea.ch</a> </p>
    </footer>
    

</body>
</html>

Alles anzeigen

CSS

*{
            margin: 0px;
            padding: 0px;
        }

        

        header#kopf img#headpicture{
            width: 100%;
            height: 100px;
        }

        div#ueberschrift{
            background-color: #232c77;
            padding: 5%; 
            text-align: center;
        }

        div#ueberschrift p {
            color: white;
        }

        section#newsletterText{
            
            border-bottom: 1px solid gray; 
            padding: 2.5% 2.5%;

            width: 50%;
            margin: 0px auto;
        }

    

        div#bild_herr_hesse{
            margin-top: 6.5%;

        }

        div#bild_herr_hesse figure img{
            width: 20%;
        }

        section#fscSignet{
            padding: 0% 2.5% 2.5% 0%;
            border-bottom: 1px solid gray;
            width: 25%;
            float: left;

        }

        section#fscSignet img{
            float: left;

        }

        section#text{
            clear: left;
            padding: 1% 1%;
            width: 25%;
        }

        footer#foot{
            background-color: #232c77;
            width: 100%; 
            padding: 1% 0%;    
        }

        footer#foot p {
            color: white;
            font-size: 10px;
            padding-left: 1.5%;
        }

        footer#foot a#hplink{
            color: white;
            text-decoration: none;
        }

        iframe{
            /*width: 100%;*/
        }

        @media only screen and (max-width: 500px){
              div#ueberschrift{
                background-color: #232c77;
                padding: 1.5%; 
                text-align: center;
        
        }
        

            section#newsletterText{
            
                border-bottom: 1px solid gray; 
                padding: 1% 1%;

                width: 75%;
                margin: 0px auto;
            }
      
      div#bild_herr_hesse{
            margin-top: 20%;

        }
    
    iframe{
      width: 75%;
    }
    
    section#text{
      padding: 0.5% 0.5%;
            width: 75%;
    }
     footer#foot{
            
            width: 100%; 
            padding: 0% 0%;    
        }


        }

Alles anzeigen

Newsletter in HTML via Outlook

Jetzt mitmachen!

Teilen