Neu Logo in HTML Emailvorlage

  • Wichtiger Hinweis Liebe Kunden, solltet Ihr den DATEV Rechnungsdatenservice 2.0 nutzen, dann müsst Ihr bis zum 30.06.2024 JTL-Wawi 1.9 installieren. Danach wird die Schnittstelle für ältere Versionen nicht mehr unterstützt.

Möfy

Mitglied
1. Juli 2023
52
3
Hallo ihr schlauen Köpfe.

Ich stosse grad mal wieder an die Grenze der Verzweiflung.
Es geht um die Emailvorlage, in HTML angezeigt.
Kann mir da jemand helfen?

Da ist im Header das Logo platziert. Sieht in der Desktopversion perfekt aus in meinem Mail (Apple-Mail).
Habe das Mail automatisch an den Kunden geschickt, da nimmt das Logo vom Header den ganzen Bildschirm ein, weil es so überdimensional gross dargestellt wird. (Outlook).
Warum?

Ich habe nun Gmail, GMX, Outlook getestet und bei mir ist es nie in dieser Dimension dargestellt.
Warum?

Ich habe mir gedacht, es liegt evt. an der Mobil-Version.
Also hab ich mich dran gemacht das Logo in der Mobil-Version zu verkleinert.
Es geht um dieses Bild/Code:
#headerImage{
height:auto !important;

/*@editable*/ max-width:600px !important;
/*@editable*/ width:30% !important; /*width habe ich von 100% auf 30% verkleinert. Sieht gut aus, alles funktioniert.*/

}

<div align="center">
<img src="https://fry.ch/bilder/intern/shoplogo/Möbel Fry_Logo_rund.png" style="max-width:120px;" id="headerImage" alt="Firmenlogo"/>
</div>

Warum wird mir das Logo nun nicht mehr mittig angezeigt sonder klebt am linken Rand trotz dem align Center?
 

DASevents

Sehr aktives Mitglied
16. Januar 2013
612
28
html hab ich schon lange nicht mehr gemuckelt aber
probier mal <center><img src="bild.jpg" height="200" width="200"> </center>
 

mh1

Sehr aktives Mitglied
4. Oktober 2020
1.339
378
Es geht um dieses Bild/Code:
#headerImage{
height:auto !important;

/*@editable*/ max-width:600px !important;
/*@editable*/ width:30% !important; /*width habe ich von 100% auf 30% verkleinert. Sieht gut aus, alles funktioniert.*/

}

<div align="center">
<img src="https://fry.ch/bilder/intern/shoplogo/Möbel Fry_Logo_rund.png" style="max-width:120px;" id="headerImage" alt="Firmenlogo"/>
</div>

Warum wird mir das Logo nun nicht mehr mittig angezeigt sonder klebt am linken Rand trotz dem align Center?
Dein unterer <div>-Container ist ja 100 % breit und du sagst jetzt, dass dieser Container (NICHT dessen Inhalt) zentriert werden soll (align="center").
Das der ganze Container jetzt zentriert ist, siehst du aber gar nicht, da er ja 100% breit ist.

lösen könnte man das so:
  • entweder den INHALT des Containers zentrieren: text-align: center;, oder
  • den Container mit display: flex anzeigen lassen: div { display: flex; justify-content: center; } img { width: 60%; }, oder
  • den <div>-Container ganz weglassen und einfach nur das Bild zentrieren mit margin: auto;. Das geht aber nur, wenn man zunächst das Inline Element <img> in ein block-level-Element konvertiert und eine Breite definiert, also: img { width: 30%; margin: auto; display: block; }
Ich würde ja das Dritte machen. Dann spart man sich einen <div> ... </div> und dein Code ist nicht so verschachtelt.