XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   HTML E-Mails (http://xhtmlforum.de/showthread.php?t=62643)

rs-web 11.10.2010 18:04

HTML E-Mails
 
Hi,
ich bin gerade am experimentieren mit HTML E-Mails und bin dabei auf ein Problem gestoßen. Erst Mal der Text, wie er ausgeliefert wird:

HTML-Code:

Received: from spooler by localhost (Mercury/32 v4.72); 11 Oct 2010 16:12:08 +0200
X-Envelope-To: <newuser@localhost>
Return-path: <kontoaktivierung@example.com>
Received: from - (127.0.0.1) by localhost (Mercury/32 v4.72) ID MG00000B;
  11 Oct 2010 16:12:08 +0200
Subject: example.com - Kontoaktivierung
To: newuser@localhost
Date: Mon, 11 Oct 2010 16:12:08 +0200
From: "example.com" <kontoaktivierung@example.com>
Message-ID: <0aa4bfd8b2e3ec43a8a8b7d0258b0789@localhost>
X-Priority: 3
X-Mailer: PHPMailer 5.1 (phpmailer.sourceforge.net)
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
Content-Type: text/html; charset="utf-8"
X-PMFLAGS: 34079360 0 0 YNN7MI5S.CNM                       

<html>
<head>
<style type="text/css">
body{ letter-spacing: 1px; color: blue;}
a{ color: #900; text-decoration: none; }
a:hover{ color: #000; }
p{ margin-top: 10px; }
.liste{ margin-left: 15px; margin-top: -7px; line-height: 1.5; }
.zeile{ margin-left: 80px; margin-top: -3px; height: 30px;        width: 350px; }
.breit{ width: 150px; display: inline-block; font-weight:bold; color:#900; }
</style>
</head>
<body>Hallo Test,<p>
um dein Konto zu aktivieren, klicke einfach auf folgenden Link:
<a href="http://localhost/example.com/registrieren.php?id=27&acode=C6fjXckMVoQ0aG7MUpYn7UYdu4INYltpRU0H">Klick mich!</a>
<br />
<br />
Falls dein E-Mail Provider keine Links unterstützt, kannst du es auch manuell aktivieren:
<br />
<div class="liste">
Schritt 1: Geh auf www.example.com<br />
Schritt 2: Klick auf den Menüpunkt "Registrieren"<br />
Schritt 3: Scroll an das Ende der Seite und gib folgende Daten ein:
<br />
<div class="zeile"><div class="breit">ID:</div>00999</div>
<div class="zeile"><div class="breit">Aktivierungscode:</div>asdfaf3i9i3asdfnnceei
</div>
</div>
<br />
Großformel etc.
<br />
<br />
Dein example.com Team
</p>
</body>
</html>

Wenn ich jetzt die E-Mail mit Peganus Mail ansehe, fallen mir folgende Dinge auf:
  1. Der Text "ID" ist in einer Zeile und die Nummer in der nächsten
  2. Das gleiche mit Aktivierungscode
  3. Das letzte, was angezeigt wird ist der Aktivierungscode->Großformel etc. und Text darunter verschwindet

Wenn ich den Quelltext in Browser ansehe(also in Datei kopiere...) dann wird alles korrekt angezeigt.

Danke schon Mal für eure Hilfe

LG rs-web

uspri 11.10.2010 19:16

Wenn Du mit HTML-Mails weiterkommen willst, dann solltest Du altes HTML schreiben, also mit Tabellen usw. Damit kommen die meisten Mailclients klar. Mit CSS gibt es große Probleme bei der Darstellung in den Clients.

Warum muss das bissl Zeug eigentlich als HTML verschickt werden? Textemail würde doch vollkommen ausreichen. Zumal HTML-Mails nicht grad das Beliebteste auf Erden zu sein scheint. Ich für meinen Teil verschicke bei allen nur Text. Hab auch mein Mailclient so eingestellt.

rs-web 11.10.2010 20:45

Hi,

danke für deine Antwort. Ich wollte die E-Mail eig. ein bisschen grafisch aufpeppen. Aber bevor ich mich jetzt mit Tabellen rumschlage lass ich es bei Text/PLAIN. Aber ein Fehler ist jetzt nicht drin oder?


LG rs-web

rs-web 11.10.2010 21:42

Ok,
ich habs jetzt doch mit Tabellen gemacht. Vll nicht perfekt aber es wird fast richtig angezeigt:
HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-oransitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
        body{
                letter-spacing: 1px;
        }
        a{
                text-decoration: none;
                color:#900;
        }
        a:hover{
                color: #000;
        }
        .abstand{
                padding-top: 7px;
        }
        .abstand1{
                padding-top: 20px;
        }
        .abstand2{
                padding-top: 14px;
                padding-left: 50px;
        }
        .abstand3{
                padding-top: 5px;
                padding-left: 50px;
        }
        .abstand4{
                padding-top: 18px;
                padding-left: 100px;
                font-weight: bold;
                letter-spacing: 2px;
        }
        .abstand5{
                padding-left: 100px;
                font-weight: bold;
                width: 200px;
                letter-spacing: 2px;
                padding-bottom: 25px;
        }
        .abstand6{
                padding-bottom: 23px;
        }
       
        .breit{
                letter-spacing: 1px;
                color: #900;
               
        }
        </style>
</head>
<body>
<table>
<tr><td>Hallo Test,</td></tr>
<tr><td class="abstand">um dein Konto zu aktivieren, klicke einfach auf folgenden Link: <a href="http://localhost/example/registrieren.php?id=000030&amp;acode=">Klick mich!</a></td></tr>
<tr><td class="abstand1">Falls dein E-Mail Provider keine Links unterstützt, kannst du es auch manuell aktivieren:</td></tr>
<tr><td class="abstand2">Schritt 1: Geh auf example.com</td></tr>
<tr><td class="abstand3">Schritt 2: Klick auf den Menüpunkt "Registrieren" und scroll nach ganz Unten</td></tr>
<tr><td class="abstand3">Schritt 3: Gib folgende Daten ein:</td></tr>
<tr><td class="abstand4"><span class="breit">ID:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>09090909</td></tr>
<tr><td class="abstand5"><span class="breit">Aktivierungscode:&nbsp;&nbsp;&nbsp;&nbsp;</span>adsfasfasdfdsfasdf</td></tr>
<tr><td class="abstand6">Viel Spaß beim Knobeln wünscht dir</td></tr>
<tr><td>Dein example.com Team</td></tr>
</table>
</body>
</html>

Könnte ihr mir vll. einen Tipp geben, wie ich das mit den "&nbsp;" eleganter lösen kann?

Und der Validor sagt: : end tag for "head" which is not finished

aber ich doch alle Tags geschlossen...

Danke schon Mal

LG rs-web

EvT 12.10.2010 00:22

Diese Fehlermeldung kommt auch dann, wenn man ein zwingend erforderliches Element für Head vergessen hat ... ;)

rs-web 12.10.2010 17:56

Ok danke,
ich hab da noch ne Frage: Wie kann ich bei Text E-Mails einen Link eibauen? Oder geht das nicht?

LG rs-web

gato 12.10.2010 18:01

Zitat:

Zitat von rs-web (Beitrag 477343)
Ok danke,
ich hab da noch ne Frage: Wie kann ich bei Text E-Mails einen Link eibauen? Oder geht das nicht?

Das geht nicht, es ist ja nur Text.

Aber, jededer halbwegs gute Client formatiert Links im Textformat automatisch in einen klickbaren Verweis. Du solltest dir darüber also keine Gedanken machen. Vermeide nur, dass übermäßig viele Sonderzeichen im Verweis vorkommen, z.B. ";".

uspri 12.10.2010 18:07

Zitat:

Zitat von gato (Beitrag 477344)
Das geht nicht, es ist ja nur Text.

Aber, jededer halbwegs gute Client formatiert Links im Textformat automatisch in einen klickbaren Verweis. Du solltest dir darüber also keine Gedanken machen. Vermeide nur, dass übermäßig viele Sonderzeichen im Verweis vorkommen, z.B. ";".

Auch Leerstellen sind der Hass, da Clients da gern umbrechen und dann beim Rauskopieren des Links Fehler auftreten können.

rs-web 12.10.2010 20:04

Ok,
danke euch beiden. Dann werde ich das & direkt ohne html formatiertung reinschreiben.

@uspri: Ist das auf mein Bsp bezogen, oder nur ein allgemeiner Hinweis?

LG rs-web

uspri 12.10.2010 20:10

Allgemeine Aussage zu dem Thema.

Schreib einfach ganz normalen Text, gib als Content-Type text/plain an und die Zeilenumbrüche dann mit \r\n. So mache ich das und fahre damit sehr gut bis jetzt, zumindestens sind mir noch keinerlei Beschwerden zu Ohren gekommen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:46 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020