HTML E-Mail Signatur - Inhalte "nebeneinander"

Netto313 · 23. Juni 2016

Guten Morgen zusammen,

ich hänge schon seit einigen Tagen ein einer Aufgabe in meinem Betrieb.

Aufgabe: Erstelle eine E-Mail Signatur (also HTML) ähnlich einer Tabelle.

Name Bild
Position
-------------------------------------
Firma Telefonnummer
Anschrift

Links soll der Name und die Position der Person stehen.
Rechts davon befindet sich eine Grafik.
Darunter soll sich eine Trennlinie befinden.
Unter der Trennlinie die Firma & Anschrift, rechts davon (unterhalb der Grafik) die Telefonnummer.

Mein Problem ist nun das ich die Anordnung & Gestaltung bisher absolut nicht auf die Reihe bekomme.
Ich habe bisher so gut wie keine Erfahrung mit HTML und alle Tutorials im Internet nutzen zur Gestaltung von HTML-Elementen CSS - das kann ich in einer E-Mail-Signatur allerdings nicht einbinden.

Bisher habe ich es mit Tabellen (<tr> bzw. <td>) versucht, mit mäßigem Erfolg:

HTML:

<TABLE BORDER=1>
   <TR>
   <TD>Mit freundlichen Grueßen / Best regards</TD>
   </TR>
   <TR>
      <TD style="width:340px;valign="middle" align="left">%[]User full name[]% </br> %[]Title[]%</TD>
      <TD><img src="Signatu.png" alt="Signatur"> </TD>
   </TR>
   <TR>
      <TD>Platzhalter</TD>
      <TD>Platzhalter</TD>
   </TR>
   <TR>
      <TD>%[]Company name[]%</TD>
	  <TD>%[\nFax:        ]Fax number[]%</TD>
   </TR>
   <TR>
      <TD>%[]Company street[]%</TD>
	  <TD>%[\nMobil:     ]Mobile phone[]%</TD>
   </TR>
   <TR>
      <TD>%%[]Company zip code[]% %[]Company city[]%</TD>
	  <TD>Platzhalter</TD>
   </TR>
</TABLE>

Kann mir jemand Tipps zur Gestaltung des Ganzen geben?
Vielen Dank im Voraus!

holdes · 23. Juni 2016

Hast du Microsoft Office auf dem Rechner? (ein halbwegs aktuelles?) Dann kannst du mal versuchen mit Word die HTML Datei zu bearbeiten und zu formatieren wie du sie gerne hättest.

Smartcom5 · 23. Juni 2016

… und bei der Gelegenheit gleich sämtliche Grafiken bitte als Base64 (MIME) – dann hast eine halbwegs gute Bewertung schon so gut wie sicher.

In diesem Sinne

Smartcom

Netto313 · 23. Juni 2016

Erstmal danke für eure Antworten.

Ja, ich habe ein aktuelles Office auf dem PC.
Ich habe bereits versucht zu "schummeln", also die Signatur in Word zu erstellen und in unser Signatur-Programm einzufügen (PolicyPatrol).
Leider zerschießt sich dabei immer die Formatierung..

@Smartcom5: Danke für den Tipp

aggitron · 23. Juni 2016

Bin kein Experte, aber diesen Code:

HTML:

      <TD style="width:340px;valign="middle" align="left">%[]User full name[]% </br> %[]Title[]%</TD>

würde ich an deiner Stelle nochmal überprüfen.

Nick_SMI · 23. Juni 2016

Hallo,

natürlich ist es sinnvoll, dass man weiß, was man tut und nicht im Internet sucht ;-)
Aber möchte nicht unfreundlich sein, jeder fängt mal an...

Also, ein kleiner Code, der dir evtl. weiter helfen kann...
(Habe auf weitere Style Eigenschaften verzichtet!)

Code:

<html>
<head>
<style>
	#person {
		float: left;
		margin-right: 4px;
	}
</style>
</head>
<body>
	<div id="person">
		<p>Max Mustermann</p>
		<p>Angestellter</p>
	</div>
	<div id="foto">
		<img src="bild.jpg" alt="Upps!">
		<p>0123 / 456789</p>
	</div>
	<hr />
	<div id="firma">
		<p>Muster und Co. GmbH</p>
		<p>Musterstra&szlig;e 11a</p>
	</div>
</body>
</html>

Nicht der beste weg, aber um dir ein wenig zu helfen! ;-)

Gruß,
Nick

Teisi · 24. Juni 2016

Hallo,

ganz ehrlich? E-Mail Templates selbst zu schreiben, das möglichst überall funktioniert - Katastrophe!
Nimm einfach ein schon existierendes Template und passe es deinen wünschen an, da siehst du dann auch wie es gemacht wird.

Zum Beispiel:
https://github.com/mailchimp/email-blueprints

http://tedgoas.github.io/Cerberus/

Smartcom5 · 24. Juni 2016

Netto313 schrieb:
…
@Smartcom5: Danke für den Tipp

Die sind heute im Angebot; SelfHTML.org!

In diesem Sinne

Smartcom

Suche

HTML E-Mail Signatur - Inhalte "nebeneinander"

Netto313

Cadet 1st Year

holdes

Captain

Smartcom5

Lt. Commander

Netto313

Cadet 1st Year

aggitron

Commander

Nick_SMI

Ensign

Teisi

Lt. Junior Grade

Smartcom5

Lt. Commander

Ähnliche Themen