Frage HTML zu Text: Praktikant sucht Hilfe fuer Email-Signaturen :)

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

sleeve

Neues Mitglied
11 Juni 2018
3
0
1
25
#1
Servus!

Bin aktuell als Praktikant eingestellt und ich soll u.a. als Nebenaufgabe die automatische Email-Signatur vereinheitlichen.
Bedingung: HTML; maximal 1333 Zeichen.

Daraus entstanden ist folgender Code mit Tables fuer den Mittelstrich (ich hab kaum Ahnung von HTML, nur minimal, war mit Hilfe von Webseiten):

Code:
<table style="height: 188px;">
<tbody>
<tr style="height: 155px;">
<td style="width: 233px; height: 155px;">
<img src="129zeichenlinkzumlogo.com" alt="webseite.com" width="229" height="70" /> 
<a href="http://www.webseite.com">webseite.com</a>
<p><span style="font-weight: 400;">1480 Strasse | Ort</span><span style="font-weight: 400;"><br /></span>
<span style="font-weight: 400;">CA 13451 | USA</span></p>
</td>

<td style="width: 6px; height: 155px;">
<hr style="width: 0.05px; height: 150px; margin: 0px; float: left; border-color: #BD272D;" />
<hr style="width: 0.05px; height: 150px; margin: 0px; float: left; border-color: #BD272D;" /></td>
<td style="width: 206px; height: 155px;">
<p>&nbsp;</p>

<p><em><strong>John Doe</strong></em><br />
Title Assistant Anything<br />
<span style="color: #800000;"><br />Mobile:</span> 707 - 123 - 1234<br />
<span style="color: #800000;">Phone:</span> 707 - 123 - 1234<br />
<span style="color: #800000;">Mail:</span>&nbsp; &nbsp;
<a href="mailto:name@email.com">name@company.com</a></p>
</td>
</tr>
</tbody>
</table>
<hr style="width: 1px; height: 200px; margin: 2px; float: left;" />
im Anhang befindet sich die Version, wie es eigentlich aussehen SOLLTE (sollsein.png), und wie es mit dem Code dann aber tatsaechlich in Outlook angezeigt wird (soist.png).

Offensichtlich gibt es folgende Baustellen:
- der Mittelstrich ist nicht farbig und nicht durchgaengig
- die Adresse wird nicht buendig untereinander dargestellt
- die Schriftart Calibri wurde nicht uebernommen
- rechts sind die Nummern bei mobile und phone nicht buendig, sollte eigentlich generell buendig mit dem Adresssatz links sein

.. waere super, wenn mir da jemand behilflich sein kann.
Sonnige Gruesse aus den USA :-)
sle3ve
 

Anhänge

Zuletzt bearbeitet:

sleeve

Neues Mitglied
11 Juni 2018
3
0
1
25
#3
Danke fuer die Antwort!

Ist keine Vorlage das als Tabelle zu machen, war nur der einzige workaround fuer den Mittelstrich als HTML-Neuling.
"inline-style" - ich weiss nicht mal was das ist?

Sonst ja, genau wie in deinem Link, danke!
Ausser dass ich die Schriftart noch auf Calibri wechseln moechte + die Schriftzeilen links und rechts idealerweisse buendig sein sollten, ohne Versatz.
Ebenso bei den Telefonnummern, wenn moeglich (bei word koennte man das mit Tabs regeln, bei nem HTML code keine Ahnung bisher)
 

basti1012

Aktives Mitglied
26 November 2017
742
70
28
37
Minden
chat.sebastian1012.bplaced.net
#4
Wenn das Tabellenlayout keine Pflicht ist und das inline style auch nicht,dann würde ich das anders machen.
Mit den styls meine ich das
<td style="width:100%;height:100%">
Früher hat man das gemacht .
Heute packt man alle diese angaben in einer Extra Datei oder in den <style> Tag.
zb so
Code:
<style>
td{
width:100%;
height:100%;
usw.
}
</style>
Wie ich das machen würde zeige ich dir gleich ,ich mache da mal ein Beispiel.
EDIT:
Man könnte es so machen
https://codepen.io/basti1012/pen/aKJMdz?editors=1100

Wenn du dir mal nicht sicher bist ob dein Code richtig ist bzw valide ,kannst du deinen Code hier mal testen
https://validator.w3.org/nu/ . Der sagt dir dann schon das meißte was man nicht darf.
Bei deinen Tabellen Layout sind laut Validator keine Fehler drinne ,aber Tabellen Layout ist heut zu Tage out und wird normalerweise auch nicht mehr benutzt.
 
Zuletzt bearbeitet:

scbawik

Senior HTML'ler
14 Juli 2011
2.494
437
83
#5
Wenn das Tabellenlayout keine Pflicht ist und das inline style auch nicht,dann würde ich das anders machen.
Mit den styls meine ich das
<td style="width:100%;height:100%">
Früher hat man das gemacht .
Heute packt man alle diese angaben in einer Extra Datei oder in den <style> Tag.
zb so
Code:
<style>
td{
width:100%;
height:100%;
usw.
}
</style>
Wie ich das machen würde zeige ich dir gleich ,ich mache da mal ein Beispiel.
EDIT:
Man könnte es so machen
https://codepen.io/basti1012/pen/aKJMdz?editors=1100

Wenn du dir mal nicht sicher bist ob dein Code richtig ist bzw valide ,kannst du deinen Code hier mal testen
https://validator.w3.org/nu/ . Der sagt dir dann schon das meißte was man nicht darf.
Bei deinen Tabellen Layout sind laut Validator keine Fehler drinne ,aber Tabellen Layout ist heut zu Tage out und wird normalerweise auch nicht mehr benutzt.
Bei Mails sind Tabellen und Inline-Styles Standard bzw. Best Practices.

Solange es Outlook gibt, wird sich daran auch nichts ändern.
 

basti1012

Aktives Mitglied
26 November 2017
742
70
28
37
Minden
chat.sebastian1012.bplaced.net
#6
Bei Mails sind Tabellen und Inline-Styles Standard bzw. Best Practices.

Solange es Outlook gibt, wird sich daran auch nichts ändern.
Steht ja auch in post1# ich blöd ich.:smile:
Ja dann sollte er wohl bei der ersten Variante bleiben.Da er Praktikant ist und wahrscheinlich der Chef da drauf achtet was er macht ,sollte er in diesen Fall das Tabellenlayout aus post2# behalten.

Überall wird das Tabellenlayout ersetzt und bei Mails noch nicht ?Mal kucken wie lange das noch so bleibt?
 

sleeve

Neues Mitglied
11 Juni 2018
3
0
1
25
#7
Bedanke mich fuer die Antworten!
Variante aus Code 3 ohne die Tables spart mir natuerlich Zeichen (begrenzt auf 1333): aber denke Variante Code 2 aus dem ersten Post ist dann wohl der way2go fuer Outlook, NAV / Salesforce.


Koenntest du die Schrift noch in Calibri aendern + gibt es die Moeglichkeit alles irgendwie buendig zu gestalten?
Ich hab es probiert mit einem <font> am Anfang und einem </font> am Ende um alles auf einmal zu aendern, hat nicht funktioniert - vom buendig platzieren (links/rechts vom Strich: Nummern rechts uebereinander) hab ich ebenfalls keinen Plan
Waere ich super dankbar dafuer!

Gruesse aus dem Sunshine State
sleeve
 

basti1012

Aktives Mitglied
26 November 2017
742
70
28
37
Minden
chat.sebastian1012.bplaced.net
#8
Ich weiß auch nicht ob das alles so richtig ist ? Kuck einfach mal https://codepen.io/basti1012/pen/vrxvZQ
Bei den Tabellen Layout kann man irgendwie kein margin-top, oder margin-bottom setzten. bIst das Normal ?
Habe da jetzt nrr Leerzeile reingesetzt und den Abstand mit line-height gesetzt. Nur ob das richtig ist bezweifel ich.
Valide ist der Code wohl,aber das hat ja auch nicht viel zu sagen.
Mit den Thema Tabellenlayout habe ich mich nie auseinander gesetzt ,weil ich es einfach nicht brauche.

Vieleicht kann mal einer kucken der sich damit besser auskennt und vieleicht mal kucken wie man das line-height mit margin-top tauschen kann.Fals es überhaupt geht,aber das weiß ich leider nicht.

Edit . Das mit den Margin-top hat sich jetzt geklärt. Habe jetzt verstanden warum das nicht ging.Aber vieleicht kann trotzdem mal einer kucken,
Danke

Fals die Vorgabe mit 1333 Zeichen eingehalten werden muß,dann müßen wir noch ein paar Zeichen sparen.Wie du siehst sind es jetzt 1777.
Aber kuck erstmal ob jetzt alles stimmt,danach kann man mal die Zeichen irgendwie reduzieren.
Ok ,wenn wir auf das einrücken verzichten,sind wir unter den Linit https://codepen.io/basti1012/pen/oyWKMq
 
Zuletzt bearbeitet: