none
z-index in Mail-Body RRS feed

  • Frage

  • Hallo allerseits,

    seit 2 tagen käpfe ich mit dem z-index in einer Mail.

    Es geht um ein Newsletter, dazu wird eine Vorlage HTML-Seite ausgelesen und bestimmte Platzhalter mit den Werten befüllt.

    Diesen neuen Inhalt versuche ich dann mittels .NET im Mail-Body zu schicken.

    Der Inhalt der HTML-Seite wurde mit Grundgerüst, ohne Grundgerüst, mit tables, divs, objects, embed, iframe usw. getestet.
    Auch die Variante mittels MS (https://www.cubetech.ch/html-newsletter-hintergrundbilder-background-image-fur-outlook/)

    Das komsiche daran ist das die Seite in allen Browser gleich aussieht nur in Mail-Clients nicht.
    Das diese anders arbeiten ist mir schon bewusst gewesen jedoch verstehe ich das mit dem z-index nicht.

    In gMail sieht das gut aus jedoch im Outlook werden die Bilder welcher als Hintergrundbild und Logo angegeben wurde, nicht gezeigt.

    Hintergrundbild aus dem grund da keine CSS Farbverlaufe im Outlook angezeigt werden, jedoch hat es bei mir nicht gefunkt.

    Nach einer Zeit bin ich drauf gekommen das die Bilder nur über den src-Attr. angezeigt werden jedoch ohne Unterstützung von z-index (siehe https://www.campaignmonitor.com/css/).

    Ohne z-index sind die Bilder untereinder und das sieht schrecklich aus.

    Wie kann ich das trotzdem das umgehen oder anders realisieren.
    Ohne Dritthersteller tools oder Canvas.


    Bitte dringend um Unterstützung da ich bald mit meinem Latein am Ende bin.
    Besten Dank im voraus und Lg

    Dienstag, 27. September 2016 18:22

Antworten

Alle Antworten

  • Hi,

    das schlechte vorweg: Vergiss sämtliche modernen HTML und CSS Varianten, die Du kennst, wenn Du HTML Emails versenden willst. Orientiere dich stattdessen an HTML, das um die Jahrtausendwende aktuell war.

    Da Du keinen Einfluss darauf hast, welchen Emailclient der Empfänger verwendet, musst Du dich (wenn's dir nicht egal ist, dass es bspw. in Outlook 2013 total grottig aussieht, in Outlook 2003 dafür gut [da Outlook 2003 erheblich mehr kann, was HTML Emails angeht als neuere Varianten ab 2007], in GMail so mittelprächtig, ...) mit dem anfreunden, das in allen Mailclients mehr oder wenig gut verstanden wird.

    embed, object, ... kannst Du dabei dann aber auch gleich weglassen, das funktioniert nirgends wirklich.

    Einen ersten guten Überblick kannst Du dir bspw. hier verschaffen:

      https://www.mediaevent.de/10-tipps-fur-html-newsletter/

      (Bitte auch die Links in dem Artikel verfolgen, dort findest Du weitere Infos)

    Weitere Hinweise unt Tipps erhältst Du bspw. hier:

      http://t3n.de/news/responsive-html-email-newsletter-446979/

      https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Newsletter

      https://webdesign.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community


    Dienstag, 27. September 2016 20:38
    Moderator
  • Hallo,

    schön wäre wenn du den HTML Code hier Posten könntest, so könnten wir dir besser helfen.

    In vielen Versionen von Outlook ist es so das standardmäßig keine Bilder heruntergeladen werden.

    Es besteht die Möglichkeit Bilder mit einzubetten davor würde ich aber abraten. Wenn schon Bilder mit drin sein sollen dann nur über einen Link.

    Gruß

    Thomas


    Icon für UWP: https://www.microsoft.com/store/apps/9nblggh5fzpm

    Dienstag, 27. September 2016 20:47
  • Hallo und Danke für die Antworten.

    @Stefan
    Vielen Dank für die Wertvollen Links, bin jetzt bisschen Schlauer geworden aber das Ziel ist noch nicht erreicht.
    Das was in den Links behandelt wird bzw. angesprochen wird, habe ich im großen und ganzen berücksichtigt.
    Trotzdem gelingt es mir nicht zwei Bilder übereinander zu stellen.

    Habe in einigen Seiten gesehen das für Outlook etwas spezielles eingefügt werden muss.
    Bsp:

    <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;; height:402px; width:600px;border:0;' src="background.png"/>
        <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;; height:402px; width:600px;border:0;'>
        <div>
       <![endif]-->
       <h1>Titel</h1>
       <p>Einiges an Text.</p>
       <!--[if gte mso 9]>
        </div>
        </v:shape>
       <![endif]-->

    Wie bzw. Wo finde ich Infos darüber. Könnte das die Lösung sein?


    @Thomas
    Die HTML-Datei ist Simple gehalten um das Gewünschte Ziel erst mal zu erreichen
    Bsp:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title></title>
    	</head>
    	<body style="color: #362f1b; width:100%; height:100%;">		
    		<div style="background-repeat: no-repeat; background-image:url('https://Url_Zum_Hintergrund_Bild.png');">
    			<table border="1" cellpadding="0" cellspacing="0" width="100%"> 
    				<tr> 
    					<td> 
    						<table border="1" cellpadding="0" cellspacing="0" width="600" height="100">
    							<tr> 
    								<td rowspan="3" align="right" style="width:150px; height:100px;">
    									<img border="0" alt="logo" align="middle" src="https://Url_Zur_Logo.png">
    								</td> 
    								<td align="left"></td> 
    							</tr> 
    							<tr> 
    								<td align="left"></td> 
    							</tr>
    							<tr> 
    								<td align="left"></td> 
    							</tr>
    						</table> 
    					</td> 
    				</tr> 
    				<tr>
    					<td>						
    						<table border="1" cellpadding="0" cellspacing="0" width="100%">
    							<tr>
    								<td style="font-size:18px; font-weight:bold; text-align:center;" align="center">
    									...Body Content...
    								</td>
    							</tr>
    						</table>
    					</td>
    				</tr>
    			</table>
    		</div>
    	</body>
    </html>

    Grundgerüst mit den Image-Anbindungen.


    1.) Hintergrundbild für DIV-Object damit gesamte Seite bunt aussieht da keine Farbverläufe möglich sind.
    Wenn Farbverlauf möglich wäre würde ich die letzten Tage nicht herum käpmfen.
    2.) IMG-Objekt für Logo. Dieser wird auch im Outlook angezeigt da sie mittels src-attr eingebunden wird

    Ziel ist es den Logo auf den Hintergrundbild anzuzeigen.
    Mit dieser Variante wird der Hintergrundbild nicht angezeigt, das Logo schon.
    Verwende ich statt dem DIV object ein img-object mit 100% größe und position 0 dann wird das Hintergrundbild zwar gezeigt aber das Logo wird dann unterhalb gezeigt.

    Ich hoffe das ich die Problematik halbwegs erklären konnte und bedanke mich im voraus.

    Gruß
    Geri








    • Bearbeitet geRe.LI Mittwoch, 28. September 2016 09:55
    Mittwoch, 28. September 2016 08:43
  • Hallo Geri,

    diese Seite kennst Du schon?

      https://backgrounds.cm/

    Aber anstatt irgendwelche (wahrscheinlich sowieso meist nicht funktionierenden) Konstrukte zu basteln, wäre es evtl. sinnvoller, sich auf alte (aber leider notwendige) Varianten zu verlassen und das Logo einfach direkt in die Grafik einzubinden. D.h. Du hast nur noch eine Grafik, die zeigt den Hintergrund und obendrauf das Logo. Als PNG oder JPG speichern und einbinden.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    Mittwoch, 28. September 2016 09:41
    Moderator
  • Hallo Stefan,

    die Seite kenne ich nicht aber sieht so ziehmlich danach aus was ich suche.
    Da ich jetzt dringend weg muss und in paar Stunden wieder online bin werde ich mir das dann ansehen.

    Jedenefalls, vielen Herzlichen Dank wiedermal u

    Lg
    Geri

    Mittwoch, 28. September 2016 09:54
  • So, vorerst sry für die verspätete Rückmeldung.
    Dank den Link schaut das Layout halbswegs gleich aus.
    Das einzige was mich stört ist, das die Größe sich nicht ändern lässt.
    Also 100% Breite und Höhe.

    Habe schon mit

    background-size:100% 100%; background-repeat: no-repeat; 

    im Style vom table und

    <v:fill type="frame" src="https://Mein_Body_BG.png" color="#fff7e5" size="100%,100%" 
    width="100%" height="100%" style=" height:100%; background-size:100% 100%; background-repeat: no-repeat;"/>


    probiert. Jedesmal wird das ignoriert.
    Das Problem ist, wenn der Inhalt größer ist dann wird das Hintergrundbild nicht entsprechend angepasst. Es hat immer die gleiche höhe.

    Aber das Problem ansich (Logo auf ein Hintergrundbild) ist gelöst, wäre noch sehr dankbar wenn mein Denkfehler korrigiert werden könnte.

    Mit besten und herzlichen Dank für den Link, hat Schlussendlich zur Lösung geführt.

    Lg
    Geri


    • Bearbeitet geRe.LI Donnerstag, 29. September 2016 13:57
    Donnerstag, 29. September 2016 13:57