HTML - Email Template -> Soooo Close!

Hi
I've done a search with various keywords about this but haven't been able to find the answer. I'd like to know how you combine the html and css from a website to create a single file that can be used to make a template suitable to send as an email (that keeps the look and feel of the site intact) I'm sure it's really easy to do via dreamweaver but I don't know how.
Thanks

Hi guys,

I created a email template for company usage using html, i put company`s logo in it, it works perfect with outlook and windows live mail, but when i open that email template in browsers, i see .jpg file at the end of the mail message. Is there any way to get rid of this? Thanks.

here is a screenshot of my problem:
http://img26.imageshack.us/img26/5672/16715830.jpg

YAY SOLVED THANKS TO COOTHEAD

This thing is driving me nuts... over the last 36 hours i, along with a helpfull member of this community have been trying to fix some SIMPLE code that wasnt broken in the first place.

It displays fine, when tested in Dreamweaver, tests fine in IE, FF.
The several adjusted codes even display fine inside the test previewer of the mail program on www.yourmailinglistprovider.com !

The trouble starts when the email HTML code gets sent to the Gmail & Hotmail inbox.
Both my inbox' are stuffed with test mails.. and it isnt going to end any time soon

I have CODE 2 that wont load up the CSS image tags.

And CODE 1 that wont display the text in its right position, not on top of the image, instead it shows it way down, like so:

http://img196.imageshack.us/img196/2625/frustration.jpg

So finally... i discovered, why.. the Gods have put me in this misfortune.
Google Mail is in BETA, and that means the following:

Quote:
Google Mail, LotusNotes, and Outlook 2007 present special coding problems. The good news? If you code to account for their oddities, your html email code is more likely to display well in most if not all email software.

Because Google cannot control how senders will code CSS and HTML, they have to take steps to ensure their application displays properly regardless of the code quality of the html email that is displayed.

As a result, Google Mail acts like an artifact of the mid 1990s when web standards were primitive. It takes some work, but it is possible to crack open a Google Mail page and see just how convoluted their approach is to rendering html email.

For one thing, Google Mail deletes any CSS style reference to a set of styles, no matter where it appears in the email. And fonts displayed in html tables have the odd habit of appearing larger than intended no matter how the html email is coded.
&#^&%$@3(*(2@#*&y#!!............................. Why

Now all my work ive put into this could be all for nothing,..
since I believe the solution given by the website is too far fetched for this amateur. The solution:


Quote:
Here are coding techniques that appear to work well in Google Mail and older email softwa

* Define the background color in a TD cell with bgcolor=, not the CSS style.
* Use the background= attribute in the TD cell for background images, not the CSS. A corollary is that the background image can be made as tall as needed. If the content of an email template might be short or tall depending on the email content, using an extra-tall background image this way lets the email layout height shrink or expand based on the height of the copy from one email to the next. Note, however, that Outlook 2007 ignores background images.
* If it works better, use the padding style to control margins within a TD cell. The margin style does not work in these cells. Padding does work.
* If a border around a TD cell is needed, Google Mail displays a border when defined in a DIV but not when defined as a border style in a TD tag.
* If a light colored link against a dark background color is needed, put the font definition in the TD cell (so it applies to P and A tags equally) then add a color= style to the A tag.
* If the P and A fonts appear to be different sizes, wrap the A tag in a P tag.
* Google Mail aggressively uses the right column of their interface which squeezes the html email into the center panel. Be sure the padding style in the content TDs is set at 10 pixels all round so text does not smash against the left and right edges.
* When testing an html email with a Google Mail account, it is likely one or more missing font styles in the TD, H1, H2, P, A, and other tags will be found. Inspect every font carefully to make sure Google Mail displays the fonts correctly.
SOURCE


I need either of these two amateuristic codes (they are basically the same) re-coded with the rules up above.
Could anyone who can do this fluently without breaking a sweat help me out?
I am near desperation and willing to transfer a fee to whatever paypal account.
I just need this mail template sent out asap. Thank you for reading.



CODE 1:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://xx.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#container{ 
    width:711px;
    margin:auto;
    font-family:verdana,sans serif;
    font-size:16px;
	
    background-image:url(blokje.png); 
 } 
#pic {
    display:block;
 }
#content {
    padding:0 0 60px 50px;
    background-image:url(onderkantcurve.png);
    background-repeat:no-repeat;
    background-position:0 bottom;
 }
#p-one {
    font-weight:bold;
    color:#410d3e;
 }
#pic-one {
    text-align:center;
 }
#pic-one img {
    width:170px;
    height:190px;
 }
#link {
    font-size:12px;
 }
</style>

</head>
<body>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://xx.com/template3.html">Klik hier voor de web-versie mocht de nieuwsbrief niet goed worden weergegeven.</a></font></p>
<div id="container">



<img id="pic" src="top.png" alt="">

<div id="content">

<p id="p-one">
 Nieuwsbrief februari 2010
</p><p><br>

Beste Lezer van mijn eerste nieuwsbrief,
</p><p>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
</p><br>

<p id="pic-one">
 <img src="koord.jpg" alt=""><br>

<a href="http://www.xx.com">www.xx.com</a>
</p><p>
<br>

 Ik nodig je van harte uit om <a href="http://www.xx.com">mijn website</a> te bezoeken.<br> 
 Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
 <a href="[FORWARDTOFRIEND]">Stuur deze email door naar een vriend of vriendin.</a></p>

</p><p>
 Mocht je geen belangstelling hebben om op de hoogte te blijven van<br> 
 mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</p><p><br>

 Met vriendelijke groet,
</p>

</p>
</div>
</div>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://ymlp154.com/u.php?YMLPID=gejseubgsguejeg"> Uitschrijven / Gegevens wijzigen </a></font></p>

</body>
</html>

CODE 2:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://xx.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#container{ 
    position:relative;
    width:711px;
    height:910px;
    margin:auto;
    font-family:verdana,sans serif;
    font-size:16px;
 } 
#pic {
    position:absolute;
    top:0;
    left:0;
 }
#content {
    position:absolute;
    top:170px;
    left:50px;
    width:651px;
    height:680px;
 }
#p-one {
    font-weight:bold;
    color:#410d3e;
 }
#pic-one {
    text-align:center;
 }
#pic-one img {
    width:170px;
    height:190px;
 }
#link {
    font-size:12px;
 }
</style>

</head>
<body>

<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://xx.com/template3.html">Klik hier voor de web-versie mocht de nieuwsbrief niet goed worden weergegeven.</a></font></p>

<div id="container">

<img id="pic" src="big.png" alt="">
<div id="content">
<p id="p-one">
 Nieuwsbrief Februari 2010
</p><p><br>
 Beste Lezer van mijn eerste nieuwsbrief,
</p><p>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
</p>
<p id="pic-one">
 <img src="koord.jpg" alt=""><br>

<a href="http://www.xx.com">www.xx.com</a>
</p><p>
<br>

 Ik nodig je van harte uit om <a href="http://www.xx.com">mijn website</a> te bezoeken.<br> 
 Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
 <a href="[FORWARDTOFRIEND]">Stuur deze email door naar een vriend of vriendin.</a></p>

</p><p>
 Mocht je geen belangstelling hebben om op de hoogte te blijven van<br> 
 mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</p><p><br>

 Met vriendelijke groet,
</p>
</div>

</div>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://ymlp154.com/u.php?YMLPID=gejseubgsguejeg"> Uitschrijven / Gegevens wijzigen </a></font></p>
</body>
</html>

Thanks for reading..

I need html code of an ad with close button and I also need html code of floating ad with close button.If someone knows how to do it , please post html.

http://lmiinc.com/LMIinc_Links.html

First off let me say sorry for the code on here, its terrible, but not mine, I'm just trying to help do a little updating while I'm building him a new site.

Ok I edited a bunch on this page & now its still a really long page with just a little info & there is a large blank gap until you reach the bottom.

I've tried resizing a few things to make it normal with no luck.

What do I need to adjust to make it normal?