Bilder + Fließtext in HTML Mail

D

DiDiJo

Erfahrenes Mitglied
Hallo Leute,

ein Kunde von uns hat sich ein Mini-Newsletter Generator gewünscht. Im Grunde genommen habe ich auf meiner Formular Seite einen TinyMCE Editor, indem der User Text darstellen kann und (was Pflichtvoraussetzung ist) auch Bilder in den Fließtext hinzufügen kann.

Der Aufbau ist nun schon durch, der Mailversand klappt wie erwartet, aber leider dreht M$ wieder sein eigenes Ding im Outlook und der der HTML-Email Darstellung.

Ich würde gerne ein Bild einfach links im Text positionieren, so dass der Text mit ein Wenig Abstand einfach um das Bild herum fließt. Ich habe nun schon zig Möglichkeiten durch und habe immer noch kein gutes Ergebnis.

Hier ein Teil meiner Versuche:
HTML: 
<img src="" align="left" style="margin-right:10px; margin-bottom:10px" />
<img src="" align="left" style="display:inline-block; margin-right:10px; margin-bottom:10px" />
<img src="" align="left" style="display:inline; margin-right:10px; margin-bottom:10px" />
<img src="" style="display:block; float:left; margin-right:10px; margin-bottom:10px" />

bzw.

<span style="margin-right:10px; margin-bottom:10px"><img src="" align="left"  /></span>
<span style="display:inline-block; margin-right:10px; margin-bottom:10px"><img src="" align="left"  /></span>
<span style="display:inline; margin-right:10px; margin-bottom:10px"><img src="" /></span>
<span style="display:block; float:left; margin-right:10px; margin-bottom:10px"><img src=""  /></span>

Hat jemand vlt. schon eine Lösung gefunden, wie ich Fließtext gemischt mit Bildern ordentlich in Oulook darstellen kann (also als Empfänger)


Mit freundlichen Grüßen

Daniel
 
Achso ja ...,

also das beste Ergebnis hatte ich bis jetzt mit folgendem Code:

Zuerst steht noch folgendes im Code:
HTML: 
<h1>Headline</h1><p><img class="imageOnLeft" src="IMAGE" alt="" width="100" height="74" />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

... das wird wie folgt umgeformt:

HTML: 
<h1>Headline</h1><p><img align="left" style="margin-right:10px; margin-bottom:10px" src="IMAGE" alt="" width="100" height="74" />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

und das sorgt dafür, dass das Bild schonmal neben dem Text steht, die Abstände zum Text werden aber komplett ignoriert. Auch wenn es nicht richtig wäre, habe ich das ganze auch schon mit Padding-Anweisungen probiert, das hat aber leider nicht funktioniert
 
Öhm ... war irgendwas falsch?

ich wollte nur genug Infos zu meinem Code und der Darstellung geben.

Kurz Um: Bild steht im Fließtext ... ich kriege aber keine Abstände in den Text eingebaut.


Edit:
Also ich bin gerade noch auf ein Schnipsel aus einer längst vergangenen Zeit gestoßen: vspace & hspace. Furchtabrer Ansatz, aber das einzige, was mir ein wenig Luft in die Bilder bringt.
 
Zuletzt bearbeitet:
DiDiJo hat gesagt.:
Hat jemand vlt. schon eine Lösung gefunden, wie ich Fließtext gemischt mit Bildern ordentlich in Oulook darstellen kann (also als Empfänger)
Zum Vergrößern anklicken....

Hab google zu css outlook befragt, und z.B. HTML E-Mails in Outlook – CSS Floating und Margin entdeckt.

HTML E-Mails in Outlook – CSS Floating und Margin hat gesagt.:
CSS Floating (z.B. Text umläuft Bild)
Wird in Outlook leider nicht interpretiert. Hierbei sollte man das HTML Attribut “align” nutzen. Wichtig – ein Margin funktioniert leider dabei nicht. Will man also z.B. mit align=”left” und “margin: 0 20px 0 0? den Abstand um das Bild regeln wird daraus in Outlook überhaupt nichts. Hierbei hilft nur folgendes. Alle Bilder (z.B. Teaserbilder) müssen mit einem entsprechenden Rand angelegt werden.
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück