HTML nieuwsbrief in Outlook

Status
Niet open voor verdere reacties.

mrbaselier

Gebruiker
Lid geworden
25 okt 2006
Berichten
56
Hallo allemaal,

Ik hoop dat ik mijn vraag hier op de goede plek plaats. Dit leek mij de meest geschikte plaats binnen helpmij.nl

Ik heb een nieuwsbrief gemaakt (HTML) voor een vriendin. Deze ziet er goed uit in Outlook 2007 en 2003 en FireBird (evenals verschillende webmail services zoals Gmail / Yahoo en Hotmail). Voor zover ik kan testen (op verschillende schermen / resoluties en Outlook versies) ziet deze nieuwsbrief er altijd goed uit.

Echter bij mijn vriendin niet, en dit is nou net degene die de nieuwsbrief gaat gebruiken.

De code staat hieronder. Evenals de screenshot van wat mijn vriendin ziet. De tekst loopt bij haar door naar rechts terwijl deze zou moeten stoppen bij het einde van de banner (boven en onder)

Hopelijk is het een beetje duidelijk voor jullie. En ik hoop echt dat jullie mij hiermee kunnen helpen.

screenshot.jpg



Alvast ontzettend bedankt!!!!

Jarno



Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css" media="screen">
	
	
	
table.hoofdtabel  {
width: 680px;
table-layout: fixed;
}


table.banner  {
width: 680px;
table-layout: fixed;
}


table.rechts  {
width: 501px;
table-layout: fixed;
}


table.footer {
width: 680px;
table-layout: fixed;
}
	
.footer a:link,a:visited,a:hover {
color: #000000; 
text-decoration: none;
}

.rechts a:link,a:visited,a:hover {
color: #000000; 
text-decoration: none;
}

.links a:link,a:visited,a:hover {
font-size: 11px;
color: #ae2535; 
font-weight: bold;
text-decoration: none;
}

h2 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px; 
margin-bottom: -8px;	
}

.linksmenu a:link,a:visited,a:hover {
color: #ae2535; 
font-style: italic;
font-weight: bold;`
text-decoration: none;
}


	
</style>
</head>

<body style="background: #f3f3f3">
	
	<table class="hoofdtabel" align="center" style="width: 680px; table-layout: fixed; background: #f3f3f3; color: #000000; vertical-align: top;"><table class="banner" cellspacing="0" cellpadding="0" style="width: 680px; height: 190px; table-layout: fixed; background: #f3f3f3; vertical-align: top;">
				<tr>
					<td style="width: 680px; color: #000000;"><a href="www.bedrijf.nl" title="bedrijf website"> <img src="http://www.vitaaldier.nl/images/bedrijf_mailimages/bedrijftop.jpg"  hspace="0" vspace="0" width="680" height="190" alt="bedrijf Therapeuten Wijzer"/></a>   
					</td>
				</tr>
			</table>
	<table class="content" cellspacing="0" cellpadding="0" style="width: 680px; max-width: 680px; height: 100%; table-layout: fixed; background: #ffffff; text-align: left; vertical-align: top;">
				<tr>
					<td class="links" style="width: 174px; table-layout: fixed; vertical-align: top; text-align: left;">
						<br />
                <div style="width: 174px; vertical-align: top; color: #000000; background: #dddddd; font-size: 11px; font-family: Arial, Helvetica, sans-serif; line-height: 150%;">
<br />
<i><b>&nbsp;&nbsp;bedrijf digitaal:</b></i><br />
&nbsp;&nbsp;Ga naar de bedrijf <a href="www.bedrijf.nl" title="bedrijf website">Website</a><br />
&nbsp;&nbsp;bedrijf <a href="mailto:info@bedrijf.nl" title="bedrijf email">E-mail</a><br />
</div>
<br />   
<div style="width: 174px; vertical-align: top; color: #000000; background: #dddddd; font-size: 11px; font-family: Arial, Helvetica, sans-serif; line-height: 150%;">
<br />
<i><b>&nbsp;&nbsp;Over bedrijf:</b></i><br />
&nbsp;&nbsp;<img src="http://www.vitaaldier.nl/images/bedrijf_mailimages/ana.jpg"  hspace="0" vspace="0" width="80" height="80" alt="bedrijf ana"><br />
&nbsp;&nbsp;Bent u op zoek naar de juiste <br />
&nbsp;&nbsp;therapeut voor uw huisdier?<br /> 
&nbsp;&nbsp;Komt u niet verder met uw<br />
&nbsp;&nbsp;(niet) reguliere behandeling en<br />
&nbsp;&nbsp;wilt u snel een afspraak<br />
&nbsp;&nbsp;maken? Vitaal Dier helpt u snel<br />
&nbsp;&nbsp;en kosteloos. Vitaal Dier weet<br />
&nbsp;&nbsp;waar u als eigenaar van een<br />
&nbsp;&nbsp;huisdier met problemen op<br />
&nbsp;&nbsp;fysiek en/of emotioneel gebied,<br />
&nbsp;&nbsp;terecht kunt.<br />
</div>
<br />       
<div style="width: 174px; vertical-align: top; color: #000000; background: #dddddd; font-size: 11px; font-family: Arial, Helvetica, sans-serif; line-height: 150%;">
<br />
<i><b>&nbsp;&nbsp;bedrijf levert ook:</b></i><br />
<a href="www.bedrijf.nl" title="bedrijf">&nbsp;&nbsp;Bedrijf</a><br />
</div>
<br /><br /><br />
					</td>

					<td class="rechts" style="width: 501px; max-width: 501px; table-layout: fixed; padding-left: 5px; text-align: left; color: #000000; background: #ffffff; vertical-align: top; font-family: Arial, Helvetica, sans-serif; line-height: 150%; font-size: 12px; color: #404040;"><br />
<h2>Hoofdkop email / nieuwsbrief</h2>
Type hier de text van je email / nieuwsbrief

<br />
<br />
<br /> 
<br />
<br />
<br /> 
<br />
<br />
					</td>
				</tr>
			</table><table class="footer" cellspacing="0" cellpadding="0" style="width: 680px; height: 175px; table-layout: fixed; background: #f3f3f3; vertical-align: top;">
				<tr>
					<td style="width: 680px; color: #000000;"><a href="mailto: info@bedrijf.nl" title="bedrijf Email"> <img src="http://www.vitaaldier.nl/images/bedrijf_mailimages/bedrijfbottomwhite.jpg"  hspace="0" vspace="0" width="680" height="175" alt="bedrijf Therapeuten Wijzer"/></a>   
					</td>
				</tr>
			</table>
		
		
</table>
</body>
</html>
 
Het is erg lastig om HTML nieuwsbrieven goed werkend te krijgen in verschillende e-mailprogramma's. Ik heb zelf veel gehad aan deze richtlijnen van Microsoft. Hierin kun je opzoeken welke tags wel en niet werken in Outlook 2007.
 
Hoi Fritzi

Dankjewel voor de tip... maar dat werkt allemaal wel. En het is de bedoeling dat het op 2003 werkt. 2007 gaat al top....

Hopelijk kun je me verder helpen!


Groetjes,

Jarno
 
Het is moeilijk om de boosdoener in de code te vinden. Het is gewoon lastig met html nieuwsbrieven. CSS werkt deels wel, maar soms krijg je zomaar problemen met bepaalde combinaties. Bij mij is het ook trial & error: testen en nog een keer testen, en anders coderen totdat het werkt.
Zelf zet ik de breedte van een tabel niet in een style maar direct in de <table> dus <table width="600">. Omdat je problemen met de breedte hebt zou je dit eens kunnen proberen.
 
Je hebt helemaal gelijk. De boosdoener vinden is moeilijk. Helaas werkt de width in de table tag zetten ook niet.

Wat raad jij aan voor een nieuwsbrief met:
1 bovenbanner
2 content (midden) colommen (waarvan 1 reclame banner en 1 tekstvak)
1 onderbanner

Ik doe het nu zo:
1 omringende table
Daarin een table voor de bovenbanner
Dan een table met 2 TD's voor de 2 midden colommen
En daarna een table voor de onderbanner

Dus
<table>
<table> </table> (bovenbanner)
<table> </table> (middenstuk)
<table> </table> (onderbanner)
</table>

Doe ik dit goed.... of kan ik beter divs of table in combi met divs gebruiken?

Alvast wederom bedankt voor al je hulp en tips!


Groetjes,

Jarno
 
Zo'n layout maak ik zo:

<div align="center">
<table width=""> </table> (bovenbanner)
<table width=""> </table> (middenstuk)
<table width=""> </table> (onderbanner)
</div>

Ik weet niet of dit beter is, maar bij mij geeft dit geen problemen.
 
Dankjewel voor deze info. Helaas biedt dit ook geen oplossing. Ik denk dat ik gewoon verder moet puzzelen. De fout ontdekken is erg moeilijk. Ik denk dat het misschien beter is de hele coding opnieuw te doen.... Als ik de oplossing nog achterhaal zal ik hem hier posten. Zo niet... ja dan niet :-)

In ieder geval ontzettend bedankt voor je hulp en tijd!!!!!

Prettig weekeind.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan