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