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

Frage [Apple Mail] EMail-Signatur - Probleme mit Darstellung

cnitsch1702

Neues Mitglied
Hallo zusammen,

ich hoffe, das Thema wurde nicht schon vorher diskutiert und entschuldige mich schonmal vorab, sollte ich einen Doppelpost machen.

Derzeit versuche ich eine "einfache" HTML-Signatur zu erstellen, mit diversen CSS-Einstellungen. Ein Logo ist auch eingefügt (ich weiß, hat eigentlich nichts in der Signatur zu suchen, ist aber vom Kunden so gewünscht) - erst hatte ich es versehentlich als .png eingefügt, jetzt ist es als .jpg eingepflegt. (Wer es am Code noch nicht sehen kann - ich beschäftige mich erst seit ca. 10 Monaten mit HTML/CSS. Vielleicht habe ich auch einfach alles verhunzt - ich hoffe nicht ;) )

Vorgestern habe ich die Signatur bereits im Apple Mail-Konto einer der Kunden via TeamViewer eingefügt - sah alles schön und gut aus.
Danach wurde entschieden, dass die Schriftart Arial mit Fallback Helvetica, sans-serif sein soll.
Den Code habe ich dementsprechend angepasst. Heute füge ich ihn nochmal bei der selben Person ein - nun verhaut es mir die komplette Darstellung. Font-Farbe wird schwarz statt hellgrau angezeigt, diverse Abstände zum Rand sind plötzlich nicht mehr vorhanden. Wenn ich die beiden Codes vergleiche sehe ich KEINEN Unterschied. Nichtmal ein falsches Anführungszeichen o.ä. - ich verzweifle gerade.

Hier der Code:

<style>
.ex1 {
margin-left: 0.2cm;
color: #a9a9a9;
font-family: "Arial", Helvetica, sans-serif;
}

.ex2 {
margin-left: 0.2cm;
font-size: 120%;
color: #a9a9a9;
font-family: "Arial", Helvetica, sans-serif;
}

hr {
width: 222px;
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
}

a {
color: #a9a9a9;
text-decoration: none;
}

a:hover {
color:#ff0000;
}

.nav a {
color:#ff0000;
}
</style>

<p class="ex2"><strong>Tanja Mews</strong></p>
<p class="ex1">Kommunikation | PR | Marketing</p>


<p class="ex1">
Karwendelstrasse 25<br>D-82041 Oberbiberg<br><br>


<span style="display:inline-block;width:2em">Tel.: </span><a href="tel:+4915203555550">+49 (0) 152 035 555 550</a><br><br>

<span style="display:inline-block;width:4em">E-Mail: </span><a href="mailto:[email protected]">[email protected]</a><br>
<a href="http://creartcrew.com" title="CREARTCREW" target="_blank">www.creartcrew.com</a>
</p>

<p class="ex1">
<span style="display:inline-block;width:6em">Inhaber: </span>Jürgen Holdenried<br>
<span style="display:inline-block;width:6em">Ust.-ID.-Nr.: </span>DE 151 181 940<br>
<span style="display:inline-block;width:6em">Steuer-Nr.: </span>115 230 50127<br>
</p>
<hr align="left">
<p>
<a href="http://creartcrew.com" title="CREARTCREW" target="_blank"><img alt="Logo CREARTCREW" data-filename="Logo_creartcrew_rz.jpg" src="http://creartcrew.com/wp-content/uploads/2017/03/Logo_creartcrew_rz.jpg" style="width: 230px!important;"></a>
</p>

------------------
Soooo... Im Anhang ist ein Screenshot der Preview, wie mir das Ganze bei codepen.io/ (https://codepen.io/anon/pen/wJPMjZ?editors=1100) angezeigt wird.

1. Wo liegt mein Fehler?
Warum werden auf unterschiedlichen Plattformen verschiedene
-Fonts (sogar Serifen)
-Font-Farben (schwarz statt hellgrau)
-Einrückungen
-Längen des <hr>-Tags
angezeigt?


2. Bei codepen.io/ wird mir leider auch angezeigt, dass <hr align="left"> wohl nicht mehr up-to-date ist, gibt es dafür eine andere Lösung? Ich möchte wie im Screenshot eigentlich nur eine Simple Linie, links ausgerichtet, mit einem kleinen Zeilenabstand oben/unten.

3. Bei Outlook scheint der Code mit der Schrift und den Abständen gut zu funktionieren - noch. Allerdings wird das Logo über die komplette Bildschirmbreite angezeigt, obwohl ich die Breite fest definiert habe (<a href="http://creartcrew.com" title="CREARTCREW" target="_blank"><img alt="Logo CREARTCREW" data-filename="Logo_creartcrew_rz.jpg" src="http://creartcrew.com/wp-content/uploads/2017/03/Logo_creartcrew_rz.jpg" style="width: 230px!important;"></a>) - woran kann das wieder liegen?

4. Ich baue das wie oben erwähnt auf Apple Mail-Konten ein und zusätzlich diverse Konten unter Windows 10 mit Outlook.
Für Apple nutze ich folgende Anleitung: http://matt.coneybeare.me/how-to-make-an-html-signature-in-apple-mail-for-el-capitan-os-x-10-dot-11/
Für Outlook jene: https://jmcblog.de/2016/03/02/html-signatur-in-outlook/
- Ich habe erst vermutet, dass ich ggfs. die Signatur-Datei zu oft überschrieben habe, sie demnach gelöscht und eine neue angelegt. Das gleiche Vorgehen - hat nichts geholfen. Mache ich hier evtl. etwas falsch?


Vielen vielen Dank schonmal an alle Helfenden!
Chris
 

Anhänge

  • Bildschirmfoto 2017-03-16 um 18.19.02.png
    Bildschirmfoto 2017-03-16 um 18.19.02.png
    107,1 KB · Aufrufe: 4
Werbung:
ich hoffe, das Thema wurde nicht schon vorher diskutiert und entschuldige mich schonmal vorab, sollte ich einen Doppelpost machen.
Doch wurde es. Nur jedesmal in einer neuen Facette, weil da grundsätzlich in den Email-Clients Darstellungsunterschiede an der Tagesordnung sind.
font-family: "Arial", Helvetica, sans-serif;
Auch wenn es so funktioniert, Schriftfamiliennamen, die Leerzeichen enthalten, sollten von Anführungszeichen eingeschlossen werden. Oder warum dann nicht "Helvetica"?

Eine aufschlußreiche Liste / Tabelle, in welchem Umfang jeweils CSS unterstützt wird:
Zu Apple Mail kann ich als Android-/Windows-User (mobil/PC) leider herzlich wenig beitragen - aber evtl. Kollege @Tronjer :)
Macbook Pro 13", mit Touchbar, i5 3,1 Ghz, 16 GB Ram und 512 SSD, im edlen Spacegrau.
 
In Apple Mail gibt es die Option 'Signatur hinzufügen'. Mit Rechtsklick auf einzelne Zeilen der Signatur lassen sich Schriftart, Größe, Farbe, usw., festlegen. Wie das Outlook, Thunderbird, etc., darstellt, habe ich mir noch nie angeschaut, und es hängt natürlich auch von den System-Fonts ab.

Ich habe um Newsletter-Mails und ähnliches immer einen großen Bogen gemacht. Das ist etwas für die Office-Fraktion oder Praktikanten. :p
 
Werbung:
Auch wenn es so funktioniert, Schriftfamiliennamen, die Leerzeichen enthalten, sollten von Anführungszeichen eingeschlossen werden. Oder warum dann nicht "Helvetica"?
Guter Punkt, danke. Ich habe das von w3school übernommen und abgeändert - und ehrlich gesagt nicht weiter darüber nachgedacht, warum dort Anführungszeichen und da nicht ;)
Habe ich mal übernommen, wird mir aber laut der Liste (danke dafür!!!!) nicht weiterhelfen.
Gibt es denn eine gute Alternative, einen Alternativ-Font einzurichten? Primär sollte eigentlich die Schrift "Resamiz" verwendet werden, davon konnte ich meinem Kunden aber abraten. Arial scheint mir eine gute Alternative zu sein. Helvetica hätte ich nur als Absicherung nutzen wollen.


In Apple Mail gibt es die Option 'Signatur hinzufügen'. Mit Rechtsklick auf einzelne Zeilen der Signatur lassen sich Schriftart, Größe, Farbe, usw., festlegen.
Danke auch für deine Antwort. Die Funktion hatte ich mir auch erst angesehen, dachte aber, es wäre sinnvoller für das CD HTML zu verwenden - zwecks Einheitlicher Darstellung etc. Zur Not werde ich darauf zurückgreifen, aber das wäre ehrlich gesagt nur der letzte Strohhalm.

Fazit für heute: Zumindest kann ich die Stunden aufschreiben, die ich heute Nacht noch an einer Lösung arbeite ;)
 
UPDATE: Ich bin leider immer noch nicht weitergekommen. Hat hier noch jemand einen Einfall?

Aktuell sieht der Code so aus:

<style>

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />

h2 {
color: #a9a9a9;
font-family: Lato;
font-size: 23px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 23px;
}

a {
color: #a9a9a9;
text-decoration: none;

}

a:hover {
color:#ff0000;
}

.nav a {
color:#ff0000;
}

hr {
align: left;
width: 222px;
display: block;
margin-top: 1em;
margin-bottom: 1em;
}

span {
color: #a9a9a9;
font-family: Lato;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 18px;
}

</style>



<h2>Tanja Mews</h2>
<span>Kommunikation | PR | Marketing</span><br><br>


<span>
Karwendelstrasse 25<br>D-82041 Oberbiberg<br><br>


<span style="display:inline-block;width:2em">Tel.: </span><a href="tel:+4915203555550">+49 (0) 152 035 555 550</a><br><br>

<span style="display:inline-block;width:4em">E-Mail: </span><a href="mailto:[email protected]">[email protected]</a><br>
<a href="http://creartcrew.com" title="CREARTCREW" target="_blank">www.creartcrew.com</a>
</span>
<br><br>
<span>
<span style="display:inline-block;width:6em">Inhaber: </span>Jürgen Holdenried<br>
<span style="display:inline-block;width:6em">Ust.-ID.-Nr.: </span>DE 151 181 940<br>
<span style="display:inline-block;width:6em">Steuer-Nr.: </span>115 230 50127<br>
</span>
<hr align="left">

<span>
<a href="http://creartcrew.com" title="CREARTCREW" target="_blank"><img alt="Logo CREARTCREW" data-filename="Logo_creartcrew_rz.jpg" src="http://creartcrew.com/wp-content/uploads/2017/03/Logo_creartcrew_rz.jpg" style="width: 230px!important;"></a>
</span>

Wie ihr seht, habe ich inzwischen Lato statt Arial/Helvetica, aber im Editor übernimmt es die H2 nicht so, wie gewünscht. Die bleibt mit serifen stehen.

Ich komme nicht weiter -.-

Danke nochmal an alle!
 
Werbung:
UPDATE: Ich bin leider immer noch nicht weitergekommen. Hat hier noch jemand einen Einfall?

Aktuell sieht der Code so aus:

<style>

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />

h2 {
color: #a9a9a9;
font-family: Lato;
font-size: 23px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 23px;
}

a {
color: #a9a9a9;
text-decoration: none;

}

a:hover {
color:#ff0000;
}

.nav a {
color:#ff0000;
}

hr {
align: left;
width: 222px;
display: block;
margin-top: 1em;
margin-bottom: 1em;
}

span {
color: #a9a9a9;
font-family: Lato;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 18px;
}

</style>



<h2>Tanja Mews</h2>
<span>Kommunikation | PR | Marketing</span><br><br>


<span>
Karwendelstrasse 25<br>D-82041 Oberbiberg<br><br>


<span style="display:inline-block;width:2em">Tel.: </span><a href="tel:+4915203555550">+49 (0) 152 035 555 550</a><br><br>

<span style="display:inline-block;width:4em">E-Mail: </span><a href="mailto:[email protected]">[email protected]</a><br>
<a href="http://creartcrew.com" title="CREARTCREW" target="_blank">www.creartcrew.com</a>
</span>
<br><br>
<span>
<span style="display:inline-block;width:6em">Inhaber: </span>Jürgen Holdenried<br>
<span style="display:inline-block;width:6em">Ust.-ID.-Nr.: </span>DE 151 181 940<br>
<span style="display:inline-block;width:6em">Steuer-Nr.: </span>115 230 50127<br>
</span>
<hr align="left">

<span>
<a href="http://creartcrew.com" title="CREARTCREW" target="_blank"><img alt="Logo CREARTCREW" data-filename="Logo_creartcrew_rz.jpg" src="http://creartcrew.com/wp-content/uploads/2017/03/Logo_creartcrew_rz.jpg" style="width: 230px!important;"></a>
</span>

Wie ihr seht, habe ich inzwischen Lato statt Arial/Helvetica, aber im Editor übernimmt es die H2 nicht so, wie gewünscht. Die bleibt mit serifen stehen.

Ich komme nicht weiter -.-

Danke nochmal an alle!

Was soll das?
Code:
<style>

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />

Außerdem:
Code:
font-family: 'Lato', sans-serif;

Und:
Code:
https://fonts.googleapis.com/css?family=Lato
 
UPDATE: Ich bin leider immer noch nicht weitergekommen. Hat hier noch jemand einen Einfall?

Aktuell sieht der Code so aus:

<style>

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />

h2 {
...
}

...

</style>
Kann auf diese Weise, wie Du das GoogleFont-CSS einbindest (<link> in <style></style>), auch nicht funktionieren.

Grundlagenforschung:
Und wenn mit den präsentierten/übernommenen Codeschnipseln des gewählten Fonts (siehe "EMBED" -> "STANDARD" & "@IMPORT") kein direkter Erfolg zu verbuchen ist, ...kein Beinbruch, kann ja mal vorkommen.

ABER: In den "Font-Boxes" wird zum Schluß explizit auf Beispiele verwiesen, wie deren CSS im HTML eingebunden werden kann :(
<gf-collection-drawer> schrieb:
Your Selection Lato

STANDARD @IMPORT

Embed Font
...
Specify in CSS
...
For examples of how fonts can be added to webpages, see the getting started guide.
 
Werbung:
Zurück
Oben