# Bilder + Fließtext in HTML Mail



## DiDiJo (11. April 2014)

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:

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


----------



## SpiceLab (11. April 2014)

DiDiJo hat gesagt.:


> aber leider dreht M$ wieder sein eigenes Ding im Outlook und der der HTML-Email Darstellung.


Wie äußert sich das?


----------



## DiDiJo (11. April 2014)

Achso ja ...,

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

Zuerst steht noch folgendes im Code:

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


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


----------



## SpiceLab (11. April 2014)

Vielen Dank für deine Antwort auf meine gestellte Frage.


----------



## DiDiJo (11. April 2014)

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


----------



## SpiceLab (11. April 2014)

DiDiJo hat gesagt.:


> ich kriege aber keine Abstände in den Text eingebaut


Das geht aus deinem Eingangspost nicht hervor; d'rum hatte ich gefragt, wie sich der Fehler in Outlook darstellt


----------



## SpiceLab (11. April 2014)

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)



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.


----------



## Jan-Frederik Stieler (11. April 2014)

Hi,
zu dem Thema HTML-E-Mails haben wir im HTML Forum schon ne ganze Menge geschrieben. Bitte mal Suchen.
Ansonsten immer ganz hilfreich:
http://www.campaignmonitor.com/css/

Funktionierende HTML E-Mail Vorlagen:
https://github.com/mailchimp/Email-Blueprints

Grüße


----------

