HTML E-Mails

rs-web · #1 (**permalink**) 11.10.2010, 17:04

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:

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>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
Content-Type: text/html; charset="utf-8"

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

Der Text "ID" ist in einer Zeile und die Nummer in der nächsten
Das gleiche mit Aktivierungscode
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 · #2 (**permalink**) 11.10.2010, 18: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 · #3 (**permalink**) 11.10.2010, 19: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 · #4 (**permalink**) 11.10.2010, 20: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 " " 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 · #5 (**permalink**) 11.10.2010, 23:22

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

rs-web · #6 (**permalink**) 12.10.2010, 16: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 · #7 (**permalink**) 12.10.2010, 17:01

Zitat:

Zitat von rs-web

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 · #8 (**permalink**) 12.10.2010, 17:07

Zitat:

Zitat von gato

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 · #9 (**permalink**) 12.10.2010, 19: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 · #10 (**permalink**) 12.10.2010, 19: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.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
HTML Mails richtig erstellen	Ben.	Serveradministration und serverseitige Scripte	2	07.04.2011 13:33
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Wie parse ich mit php Markdown syntax nach html?	asdfgqw	Serveradministration und serverseitige Scripte	0	03.06.2008 00:11
Free mail account und Mails im HTML Format zu send	Mr.NO	Offtopic	0	20.01.2005 13:20
Versenden von HTML Mails mit CSS	tritratrick	CSS	1	20.08.2004 21:31