Having trouble with HTML template HELP!

**Toppers** · 04-06-2011, 02:57 PM

Your help will be greatly appreciated.

I'm trying to put together a template for an e-mailer however i'm having trouble with regards to the footer.

On dreamweaver, the CSS and HTML DIV tags are no different to the rest of the DIVs, however the footer DIV doe not appear correctly on 'Live View' or on the web browsers.

Please could someone suggest the reasons why.

You can find the HTML and CSS in the following posts.

Many Thanks,
Craig

**Toppers** · 04-06-2011, 02:59 PM

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>toppers eshot</title>
<style type="text/css">
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
body {
background-color: #999;
}
#container {
margin: auto;
width: 800px;
}

#container #header {
margin: auto;
height: 150px;
width: 800px;
}
#container #header #headerleft {
background-color: #FFF;
height: 150px;
width: 570px;
float: left;
background-image: url(images/headerleft.gif);
}
#container #header #headersocial {
float: right;
height: 75px;
width: 230px;
background-color: #EBEBEC;
}
#container #header #headercontact {
float: right;
height: 75px;
width: 230px;
background-color: #EBEBEC;
}
#container #bodycontainer {
background-color: #333;
height: 75px;
width: 800px;
}
#container #bodycontainer #Nav1 {
background-color: #0F0;
height: 75px;
width: 800px;
}

#container #bodycontainer #offerimages1 {
background-color: #FFF;
height: 300px;
width: 400px;
float: left;
}
#container #bodycontainer #offerimages2 {
float: right;
height: 300px;
width: 400px;
background-color: #FFF;
}
#container #bodycontainer #text_col_1 {
background-color: #FFF;
height: 350px;
width: 400px;
float: left;
text-align: center;
}
#container #bodycontainer #text_col_2 {
height: 350px;
width: 400px;
background-color: #FFF;
float: right;
text-align: center;
vertical-align: 0%;
}
#container #bodycontainer #footer {
background-color: #0F0;
height: 50px;
width: 800px;
}
</style>
</head>

<body>
<div id="container">
<div id="header">
<div id="headerleft"></div>
<div id="headersocial">Follow us on: <img src="images/fb.gif" width="40" height="60" alt="facebook" /> <img src="images/tw.gif" width="40" height="60" alt="twitter" /></div>
<div id="headercontact">Tel: 01438 746 767
<br/> Web: www.toppersprint.co.uk</div>
</div>
<div id="bodycontainer">
<div id="Nav1"><img src="images/navigation1.gif" width="200" height="75" alt="offer1" /><img src="images/navigation2.gif" width="200" height="75" alt="offer2" /><img src="images/navigation3.gif" width="200" height="75" alt="offer3" /><img src="images/navigation4.gif" width="200" height="75" alt="offer4" /></div>
<div id="offerimages1"><img src="images/bodyimageleft.gif" width="400" height="300" alt="offer image left" /></div>
<div id="offerimages2"><img src="images/bodyimageright.gif" width="400" height="300" alt="offer image right" /></div>
<div id="text_col_1">
<p>Save up to 50%
on selected products <br />
We've gone product discount mad this month! <br />
<br />
We've discounted prices on a large range of products
including: <br />
Flyers, Leaflets, Business Cards,
Folded Leaflets & More. <br />
<br />
Call now on 01438 746767 for our latest brochure. <br />
<br />
10,000 Flyers for £99 <br />
Thinking about having some flyers printed? <br />
Well now is the time! <br />
<br />
10,000 flyers for only £99.
We can also design them for you from just £60 p/h <br />
Call now on 01438 746767 <br />
<br />
Don't Forget <br />
<br />
We also print and design all your promotional print <br />
from leaflets, brochures, folders and stickers. <br />
Call now on 01438 746767 for our latest brochure. <br />
<br />
36 years and still going strong<br />
<br />
It is important to us that we continue to offer
high quality products <br />
at affordable prices.

Our customers recognise that we only<br />
use quality materials as cheaper alternatives just
aren't up to the job. <br />
Rest assured that
if you buy any Toppers product it will be of quality,<br />
excellent value for money and always on time.</p>
</div>
<div id="text_col_2">Contact Us: <br />
<br />
Toppers Print and Design Ltd.<br />
93 High Street, <br />
Stevenage,<br />
Hertfordshire<br />
SG1 3HR <br />
<br />
t: 01438 746767 <br />
f: 01438 745303<br />
<br />
e: sales@toppersprint.co.uk <br />
w: www.toppersprint.co.uk<br />
<br />
Follow us on twitter
Like us on facebook</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</div>

</body>
</html>

**Corrosive** · 04-06-2011, 03:04 PM

Have you balanced out and made sure all your divs are closed? I find it very useful to use a comment on every closing div so you can match them up. Example;

Code:

<div id="wrapper"></div><!-- /wrapper -->

That way, when wrapper ends up all the way down the page you are happy your tags balance.

**Corrosive** · 04-06-2011, 03:07 PM

By the way, if you are thinking of mailing that, then most mail clients will strip the contents of your head tags right out.

**Toppers** · 04-06-2011, 03:29 PM

Thanks for your help.

We're self learning here :icon_hide:

So what i've done is placed the CSS within the Body (I assume this is okay as Photoshop automatically places the css into the Body)

Presumably this will work for emailer clients.

However, there is still an issue with the footer that we just cannot put our finger on. All of the Div Tags are closed and contained within the relevant places.

**Corrosive** · 04-06-2011, 03:42 PM

Nah, you wanna go down the inline styles route. i.e.

Code:

<div id="container" style="width: 600px; color:green;">Content</div>

Your head tag styles will be stripped. I'd even ease you down the road of tables for layout when it comes to HTML e-mails. Try this guide for size; How To Code HTML Email Newsletters (All New Version)*|*Reach Customers Online*|*Connect with Low-Cost Tools and Know-How

Thread: Having trouble with HTML template HELP!

LinkBack

Thread Tools

Display

Having trouble with HTML template HELP!

Similar Threads

What is the name of this template?

YouTube Template Required

A6 Flyer template

Having trouble with bounding boxes

DreamWeaver: How to create a template(?)

Posting Permissions