Newsletter: Tabelle wird nicht richtig angezeigt

Hallo zusammen!

wenn ich nen Newsletter mit 6 Artikelbilder versende,
dann werden die Bilder nebeneinander angezeigt.

Jedoch in der Vorschau,
sind 2 Zeilen mit je 3 Bilder.

Wieso das denn?

LG, Marcello

Weil du im falschen Unterforum schreibst :smiley:
nein, nur Spaß.

Aber so ist das mit den E-Mails.
Je nach E-Mail Client / Mail Provider wird der HTML Code anders dargestellt, da kannst du dich eigentlich nicht auf die Vorschau im Browser verlassen.
HTML für Mails hat relativ wenig mit dem aktuellen HTML zu tun, da der Standard für Mails noch bei HTML 4.0 liegt.
Könnte aber auch sein, dass in deinem Code irgendwo ein Tag fehlt, und da sind E-Mail Clients auch sehr sensibel.

du müsstest ggf schon mit mehr Infos (welches E-Mail Programm oder Anbieter, welches Gerät) und dem eigentlichen Code kommen

[B]Also hier ist der Code[/B]


    <div style="width:590px">
        <div style="padding: 10px 0;">
            <img src="[{$oViewConf->getImageUrl('logo_email.png', false)}]" border="0" hspace="0" vspace="0" alt="[{ $shop->oxshops__oxname->value }]" align="texttop">
        </div>

		<h3><b>NEU NEU NEU !</b></h3><br /><br />

			<div style="max-width: 590px">
			[{if isset($articlelist) }]
			            <h3 style="margin: 10px 0 0px; padding: 0; line-height: 35px"><b>Individuelle Designs von zufriedenen Kunden:</b></h3>
			            <div style="border-top: 4px dotted #5E3FE8; margin-bottom: 18px; margin-top: -4px; max-width: 590px"></div>
			            [{foreach from=$articlelist item=product}]
			                <table cellspacing="0" cellpadding="0" border="0" align="left" style="height:216px; margin-right:15px;margin-bottom:10px;border: 1px solid #000000; padding: 6px;">
			                    <tr>
			                        <td align="center" style="max-width: 170px; ">
			                            <a href="[{$product->getLink()}]" class="startpageProduct"><img vspace="0" hspace="0" border="0" alt="[{ $product->oxarticles__oxtitle->value }]" src="[{$product->getThumbnailUrl()}]" height="130px" width="160px"></a>
			                        </td>
			                    </tr>
			                    <tr>
			                        <td>
			                            <p style="height: 30px">
			                                <b>[{ $product->oxarticles__oxtitle->value }]</b>
			                            </p>
			                        </td>
			                    </tr>
			                    <tr>
			                        <td height="20">
			                            <p style="font-size: 14px; margin: 5px;">Jetzt nur <b>[{ $product->getFPrice() }] [{ $mycurrency->sign}]</b></p>
			                        </td>
			                    </tr>
			                </table>
			            [{/foreach}]
        	[{/if}]
        	</div>

			Schon <b>ab 16,99 EUR</b> inkl. Versand !!!<br />
			Egal was du haben möchtest !!!<br /><br />

			Ob ein Design von Deiner <b>Lieblingsmannschaft</b>,<br />
			von Deinem <b>Haustier</b> oder sonstigem <b>Motiv</b>.<br /><br />

			Schick einfach eine Nachricht mit deinen Vorstellungen.<br /><br />

			<b>Wir freuen uns.<br /><br />

        <div style="margin: 0px 0 15px -17px; padding: 12px 20px;">
            <p style="font-size: 18px; margin: 0; padding: 0;">[{ oxcontent ident="oxemailfooter" }]</p>
        </div>

        <p style="font-size:11px">
				Du möchtest keinen Newsletter mehr?<br />
				Kein Problem - klick einfach <a href="[{ $oViewConf->getBaseDir() }]index.php?cl=newsletter&fnc=removeme&uid=[{$myuser->oxuser__oxid->value}]" style="font-size: 11px;" target="_blank">hier</a>.
		</p>
    </div>
  </body>
</html>



ich habs nicht durch email test durchgejagt, aber alleine vom code her hast du eine div mit max-width 590px.
und mehrere Tabellen mit max-width 170px ohne fester Breite und Anordnung. D.h. sie können sich eben nebeneinander positionieren und unterschiedlich breit sein, also auch ca 140px breit, womit sie alle 4 nebeneinander passen.

Was du brauchst, ist eine Tabelle als container fürs Layout drum herum, müsste etwa so aussehen:


header
banner
bla bla
[{if isset($articlelist) }]
<table>
[{foreach from=$articlelist item=product name=newsletterproducts}]
[{if $smarty.foreach.newsletterproducts.index is odd}]<tr>[{/If}]
<td> [Produkt-Infos] </td>
[{if $smarty.foreach.newsletterproducts.index is even}]</tr>[{/If}]
[{/foreach}]
</table>
[{/if}]

musst aber höllisch aufpassen, dass die Newsletter immer eine gerade Anzahl an Artikeln haben, also 2, 4, 6 usw.
Und besser mit festen Breiten arbeiten.

Wenn du ein gmail konto hast, kannst du darüber HTML Mails testen


Oder halt jedes mal im Shop ein Newsletter verschicken.

Ich bastle meine aktuellen Shop Mails mit email blueprints von mailchimp
http://templates.mailchimp.com/

ok, danke!

Ich spiel mich jetzt ein wenig.
Hab jetzt diesen Code eingebaut.


[{if isset($articlelist) }]
			            <table cellspacing="0" cellpadding="0" border="0" align="left" style="height:216px; margin-right:15px;margin-bottom:10px;border: 1px solid #000000; padding: 6px;">
						[{foreach from=$articlelist item=product}]
						<tr>
						<td align="center">
						<a href="[{$product->getLink()}]" class="startpageProduct"><img vspace="0" hspace="0" border="0" alt="[{ $product->oxarticles__oxtitle->value }]" src="[{$product->getThumbnailUrl()}]" height="130px" width="160px"></a>
						</td>
						</tr>
						<tr>
						<td>
						<p style="height: 30px">
						<b>[{ $product->oxarticles__oxtitle->value }]</b>
						</p>
						</td>
						</tr>
						<tr>
						<td height="20">
						<p style="font-size: 14px; margin: 5px;">Jetzt nur <b>[{ $product->getFPrice() }] [{ $mycurrency->sign}]</b></p>
						</td>
						</tr>
						[{/foreach}]
						</table>
[{/if}]

Jetzt sind die Artikelbilder untereinander. :frowning:

ja, das passt zu dem Code, den du eingebaut hast.

hmmm, aber wie bringe ich es zamm,
dass die Bilder nebeneinander sind?

3 in einer Zeile

dafür musst du wohl bisschen HTML lernen

Hier findest du noch ein Paar Tipps zu den HTML Mails:
http://www.mediaevent.de/10-tipps-fur-html-newsletter/
http://maddesigns.de/html-newsletter-1030.html

HTML kann ich.

Dann solltest Du das Problem erkennen: “<tr>” bezeichnet eine neue Zeile, </tr> beendet die Zeile. Wenn alle Felder in einer Zeile stehen sollen, darfst Du zwischen den Tabellenfeldern <td>xxx</td>keine neue Zeile beginnen.

Jetzt scheiss ich schon ne Weile an dem Code herum.

Über Gmail sehe ich dasselbe Ergebnis wie in der Vorschau im Admin-Bereich.
Jedoch per Outlook sind die Bilder in einer Wurst.

Idiotisch.

[QUOTE=Marcello_Martin;158223]
Jedoch per Outlook sind die Bilder in einer Wurst.
Idiotisch.[/QUOTE]

Outlook nutzt zum rendern von HTML-Mails die rudimänteren HTML-Kenntnisse von Microsoft WORD. Ja du ließt richtig, kein Witz. :eek:

Diese müssten aus dem Jahr 1999-2000 ca. stammen. :rolleyes:

Ganz simple Tabellenkonstrukte sollten aber gehen…

Ja, das hab ich heut gelesen,
jedoch bekomme ich es leider nicht hin. :frowning: