Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Having trouble with HTML template HELP!

Discussion in 'Website Coding & Programming Forum:' started by Toppers, Apr 6, 2011.

  1. Toppers

    Toppers Member

    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
     
  2. Toppers

    Toppers Member

    <!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>
     
  3. Corrosive

    Corrosive Moderator Staff Member

    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.
     
  4. Corrosive

    Corrosive Moderator Staff Member

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

    Toppers Member

    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.
     
  6. Corrosive

    Corrosive Moderator Staff Member

Share This Page