I picked a template which i have been working on for ages.It has all sorts of problems, starting with the absence of DOCKTYPE>>>>>>>>> Here is the CSS causing me headache- my site is www.sufuri.net * { padding : 0; margin : 0; } body { margin: 0px; height: 100%; font-family : Arial, Helvetica, sans-serif; color : #666666; font-size : 12px; } img { padding : 3px; border : 1px solid #888f3d; } img.floatTL { float : left; margin-right : 7px; margin-bottom : 3px; margin-top : 2px; margin-left : 10px; } img.floatTR { float : right; margin-left : 7px; margin-bottom : 3px; margin-top : 2px; margin-right : 10px; } #wrapper { width : 870px; margin : 0 auto; } #header { border : 1px solid #ccc; margin : 5px 5px 5px 5px; height : 115px; background-color : #847ec8; } .logo { width : 160px; height : 40px; background-image : url(images/buttonone.gif); margin-top : 20px; margin-left : 5px; } .logo a { color : #686b43; font-size : 2em; text-decoration : none; padding-left : 12px; line-height : 1.7em; } .advertisement { position : relative; left : 200px; top : -45px; width : 468px; height : 60px; background-image : url(images/adbg.gif); background-repeat : no-repeat; } .advertisement p { color : #f9f9f9; font-size : 2.3em; padding-left : 90px; padding-top : 10px; } .searchbox { float : right; margin-top : -120px; margin-right : 20px; } .searchbox { width : 127px; height : 60px; background : #847ec8; color : #574a22; } .searchbox form.form { width : 127px; height : 60px; } .searchbox form.form .input { width : 61px; height : 16px; color : #666; border : none; font : 10px Verdana, Arial, Helvetica, sans-serif; font-weight : bold; text-align : center; text-transform : uppercase; } .searchbox input { width : 104px; height : 16px; display : block; background : #fff; color : #000; font : 11px Verdana, Arial, Helvetica, sans-serif; margin : 14px 0 0 10px; } .breakingnews { width : 842px; height : 20px; border : 1px solid; margin-top : -33px; margin-left : 6px; background-color : #ffffff; padding-left : 3px; padding-top : 5px; } #leftcolumn { margin : 0 5px 5px 5px; display : inline; width : 170px; float : left; min-height : 300px; border : 1px solid #ccc; } * html #leftcolumn { height : 300px; } #leftcolumn h3 { background-color : #847ec8; font-size : 1em; padding-left : 7px; padding-top : 2px; padding-bottom : 2px; color : #fff; font-weight : bolder; } .menuleft ul { margin : 10px 0 0 0; list-style-type : none; margin-left : 5px; } .menuleft ul li { width : 155px; height : 15px; border-bottom : 1px dashed #868686; } .menuleft ul li a { display : block; height : 12px; background : url(images/arrow1.gif) no-repeat 0 50%; color : #888f3d; font : 400 11px Arial, Helvetica, sans-serif; padding : 0 0 0 10px; } .menuleft ul li a:hover { background : url(images/arrow2.gif) no-repeat 0 50%; text-decoration : none; color : #7e9dc8; } .menuleft ul li.last { border : none; } #centercolumn { border : 1px solid #ccc; margin : 0 5px 0 0; display : inline; width : 504px; float : left; min-height : 300px; } * html #centercolumn { height : 300px; } #boxes_I { width : 500px; height : 170px; margin-left : 10px; } .box1 { width : 240px; float : left; margin-top : 5px; margin-right : 10px; } .box1 img { margin-top : 15px; } .box1 h3 { background-image : url(images/hbg1.gif); background-repeat : no-repeat; padding-top : 5px; font-family : Times, "Times New Roman", serif; font-weight : lighter; color : #686b43; font-size : 1.5em; padding-bottom : 10px; } .box1 h4 { padding-right : 10px; padding-top : 15px; font-family : Times, "Times New Roman", serif; color : #333; font-weight : lighter; font-weight : bolder; } .box2 { width : 240px; float : right; margin-top : 5px; margin-right : 10px; } .box2 h3 { background-image : url(images/hbg1.gif); background-repeat : no-repeat; padding-top : 5px; font-family : Times, "Times New Roman", serif; font-weight : lighter; color : #686b43; font-size : 1.5em; padding-bottom : 10px; } .box2 h4 { padding-right : 10px; padding-top : 15px; font-family : Times, "Times New Roman", serif; color : #333; font-weight : lighter; font-weight : bolder; } #threeboxes { width : 480px; position : relative; margin : 3px auto 10px auto; padding : 4px 0 0 5px; border : 1px solid #ffe; } .boxone { width : 150px; float : left; margin : 0 7px 0 0; color : #524201; font : 11px Verdana, Arial, Helvetica, sans-serif; border : 1px solid #fff; } .boxone h2 { color : #333; font : 14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight : bolder; padding : 0 0 0 0; } .boxone p { padding : 0 0 0 0; line-height : 12px; } .boxone p.more { width : 66px; height : 18px; padding : 10px 0 0 24px; } .boxone p.more a { width : 66px; height : 18px; display : block; background : #7e9dc8; color : #fff; font : 11px Verdana, Arial, Helvetica, sans-serif; font-weight : bold; text-align : center; text-decoration : none; } .boxtwo { width : 150px; color : #212121; float : left; margin : 0 7px 0 0; font : 11px Verdana, Arial, Helvetica, sans-serif; border : 1px solid #fff; } .boxtwo h2 { color : #333; font : 14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight : bolder; padding : 0 0 0 0; } .boxtwo p { padding : 0 0 0 0; line-height : 12px; } .boxtwo p.more { width : 66px; height : 18px; padding : 10px 0 0 24px; } .boxtwo p.more a { width : 66px; height : 18px; display : block; background : #7e9dc8; color : #fff; font : 11px Verdana, Arial, Helvetica, sans-serif; font-weight : bold; text-align : center; text-decoration : none; } .boxthree { width : 150px; color : #333; float : left; margin : 0 7px 0 0; font : 11px Verdana, Arial, Helvetica, sans-serif; border : 1px solid #fff; } .boxthree h2 { color : #333; font : 14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight : bolder; padding : 0 0 0 0; } .boxthree p { padding : 0 0 0 0; line-height : 12px; } .boxthree p.more { width : 66px; height : 18px; padding : 10px 0 0 24px; } .boxthree p.more a { width : 66px; height : 18px; display : block; background : #7e9dc8; color : #fff; font : 11px Verdana, Arial, Helvetica, sans-serif; font-weight : bold; text-align : center; text-decoration : none; } .onemorebox { padding-top : 15px; padding-bottom : 15px; } .onemorebox h2 { font-family : Times, "Times New Roman", serif; font-size : 1.6em; color : #7e9dc8; padding-top : 10px; margin-left : 10px; } .onemorebox p { margin-right : 10px; text-align : justify; } #rightcolumn { margin : 0 5px 0 0; display : inline; width : 170px; float : left; border : 1px solid #ccc; min-height : 300px; padding-bottom : 5px; } * html #rightcolumn { height : 300px; } #rightcolumn h3 { background-color : #847ec8; font-size : 1em; padding-left : 7px; padding-top : 2px; padding-bottom : 2px; color : #fff; font-weight : bolder; } form { margin-top : 0; width : 150px; margin-left : 9px; margin-right : 5px; margin-bottom : 15px; } form p { padding-top : 10px; padding-left : 5px; padding-bottom : 5px; color : #847ec8; } .reg p { padding-left : 5px; } .textright1 h2 { background-image : url(images/buttonyellow.jpg); background-repeat : no-repeat; margin-left : 10px; font-size : 17px; font-weight : lighter; padding-left : 5px; padding-top : 8px; padding-bottom : 7px; margin-top : 15px; } .textright1 p, .textright2 p, .textright3 p { margin-top : -4px; margin-left : 11px; margin-right : 10px; border-left : 1px solid #ccc; border-right : 1px solid #ccc; padding-left : 3px; padding-top : 5px; padding-bottom : 5px; border-bottom : 1px solid #ccc; } .textright2 h2 { background-image : url(images/buttongreen.jpg); background-repeat : no-repeat; margin-left : 10px; font-size : 17px; font-weight : lighter; padding-left : 5px; padding-top : 8px; padding-bottom : 7px; margin-top : 15px; } .textright3 h2 { background-image : url(images/buttonorange.jpg); background-repeat : no-repeat; margin-left : 10px; font-size : 17px; font-weight : lighter; padding-left : 5px; padding-top : 8px; padding-bottom : 7px; margin-top : 15px; } #footer { position: absolute; left: 0px; bottom: 0px; width: 100%; display: block; height: 25px; z-index: 999; padding: 0px; margin: 0px; } #footer p { color : #a8bcf6; } #footer a { color : #a8bcf6; } PLEASE HELP.
Use dreamweaver, and select the div then on the properties tab keep adjusting it till u get your desired position.
I am working on a mack. My dreamweaver is on my PC. When i do it on my pc i get these newIE codes which only mess up the whole thing. Keep the comments coming as i try out your suggestions. Happy new year1
You want a 100% height model with the footer always at the bottom? Position: aboslute isn't what you want here... when the content gets longer (like it is) it just goes right past the footer because the footer doesn't see the page and the page doesn't see the footer (absolute positioning does that). Your HTML is something we should see, to see what the footer's inside (or if it's alone). You should post the important stuff (not necessarily all the little adverts and little boxes, but the main containers). You can also check out the css of a 100% height page here. In that case the footer isn't inside anything except the body, is given a fixed height and then a negative top margin so it sit "on top" of the rest of the page, yet still will let your content push it down because the footer is written in the HTML as coming after all the containers with the content in it.
HAPPY NEW YEAR. Thanks a bucket for going out of your way to help. Yea, I would like to clean the css page so that it can easier for me to add on new pages and also to manage the home page because i want to make it more of a news web site, so i will be updating it several times a week. I will post the entire HTML code here shortly. Please help. Cheers, S
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>SUFURI.NET HOME PAGE</title> <meta name="verify-v1" content="8+08D19IQo1/jG2q7IrcR0igCIh39qh8zSYMIZCUT70=" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="wrapper"> <div id="header"> <div class="logo"><a href="#">SUFURI.NET</a></div> <div class="advertisement"><p>Join our <a href="http://www.sufuri.net/forums"> FORUM</a></p></div> <div class="searchbox"> <form action="" method="post" class="form"> <input name="" type="text" /> <input name="" type="submit" class="input" value="SEARCH" /> </form> </div> <div class="breakingnews"><a href="http://news.bbc.co.uk/sport/">BBC SPORTS NEWS </a></div> </div> <div id="leftcolumn"> <h3>OUR PARTNERS</h3> <div class="menuleft"> <ul> <li><a href="#">Equity Bank</a></li> <li><a href="#">Western Union</a></li> <li><a href="#">PostaPay</a> <li><a href="#">Western Union</a></li> <li><a href="#">PostaPay</a> <li><a href="#">Western Union</a></li> <li><a href="#">PostaPay</a> </li> <li><a href="#">Essential Oils</a></li> <li><a href="#">Kenya Airways</a> </li> <li><a href="#">Safaricom</a></li> <li class="last"><a href="#">CFC</a></li> </ul> <br/> <br/> <h3>Lifestyle Links</h3> <ul> <li><a href="#">Bussiness</a></li> <li><a href="#">Leisure and tourism</a></li> <li><a href="#">Culture</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Money</a></li> <li><a href="#">Education</a></li> <li><a href="#">Health</a></li> <li><a href="#">Jobs</a></li> <li><a href="#">Safety</a></li> <li class="last"><a href="#">Politics</a></li> </ul> <br/> <br/> <h3>Classified Ads</h3> <ul> <li><a href="#">Advert</a></li> <li><a href="#">Advert</a></li> <li><a href="#">Advert</a></li> <li><a href="#">Advert</a></li> <li><a href="#">Advert</a></li> <li><a href="#">Advert</a></li> <li><a href="#">Advert</a></li> <li><a href="#">Advert</a></li> <li class="last"><a href="#">Advert</a></li> </ul> </div> </div> <div id="centercolumn"> <div id="boxes_I"> <div class="box1"> <img src="images/masai.jpg" width="200" height="139" alt="masai" /> </div> <div class="box2"> <h4>TRAVELING</h4> <h3>Living abroad</h3> If you live overseas, are planning to, or just enjoy learning more about the small planet we live on, then you have landed on the right web site. This web site provides you with time tested and proven tips that will make you see the bright side of your new life sooner than you think. <a href="#">read more..</a></p> </div> </div> <div id="threeboxes"> <div class="boxone"> <h2>BEFORE YOU GO</h2> <p>Money is money no matter where you are, but it changes in value depending on where you go. If you’re moving or just travelling abroad, you need to understand how credit cards work and if certain cards are accepted.</p> <p class="more"><a href="#">more</a></p> </div> <div class="boxtwo"> <h2>MONEY</h2> <p>Just as living anywhere, there are plenty of ways that you can get and spend your money when you are living abroad.</p> <p class="more"><a href="#">more</a></p> </div> <div class="boxthree"> <h2>ON ARRIVAL</h2> <p>If you’re in a new country and a new life, why not share the experience with those that you love? Staying connected with the ones that you love can do a lot for you when you’re abroad for a job or school.</p> <p class="more"><a href="#">more</a></p> </div> </div> <div class="onemorebox"> <h2>Travel Guide</h2> <img src="images/cat.jpg" class="floatTL" alt="cat" /> <p>We have information on to local tourism and links to travel websites,maps and add-ons that make it easy for travelers and tourists to plan their next holiday, vacation or weekend away. <a href="#">read more</a></p> <br/> <h2>Higher Education</h2> <img src="images/diploma.gif" class="floatTL" alt="diploma" /> <p> If you require information on applying to university, life as a student or any other aspect of higher education you'll need as a student, please visit .. .. <a href="#">read more</a></p> </div> <div id="boxes_I"> <div class="box1"> <h4>Careers and expatriate resources</h4> <h3>Getting going</h3> <p>We provide resources, practical and up to date information on living costs, overseas real estate, renting a property to live in, retirement havens, overseas Careers & Jobs, Freight, Taxes, Accommodation, Healthcare, International Schools, Childcare, Repatriation, Social Life,Immigration, Money transfers and Investments.</p> <a href="#">read more</a> </div> <div class="box2"> <h4>visit our <a href="http://www.sufuri.net/forums"> DISCUSSION FORUMS</a></h4> <h3>Meet new people and discuss burning issues</h3> <img src="images/walking.jpg" class="floatTL" alt="Image" /> <p>Please visit often, join in on our community Forum, sign up to our newsletter, send us your ideas and feedback, help us find useful website links and as many organisations as possible.</p> <a href="#">read more</a> </div> </div> </div> <div id="rightcolumn"> <h3>User Login</h3> <form action="a" method="get" > <p> Username: <br /><input name="a" type="text" size="16" /><br /> Password: <br /><input name="a" type="password" size="16" /><br /><br /> <input name="a" type="submit" class="login" value="Login" /> </p> </form> <div class="reg"> <p>New User Register <a href="#">here</a>.</p> </div> <div class="textright1"> <h2>CHEAP CALLS</h2> <p>Contact us for cheap international calling cards.</p> </div> <div class="textright2"> <h2>CHEAP FLIGHTS</h2> <p>Contact us if you want to advertise on this space</p> </div> <div class="textright3"> <h2>BOOKS</h2> <p>Contact us if you want to advertise on this space.</p> <div class="textright4"> <h2>SEND MONEY</h2> <p>Contact us if you want to advertise on this space</p> <div class="textright5"> <h2>GET PAID</h2> <p>Review a product and get paid</p> </div> </div> <div id="footer"> <p> Copyright © 2007 www.sufuri.com:Templates and Layouts by: <a href="http://www.getcsstemplates.com"title="free css templates and layouts">GET CSS WEB DESIGN</a> </p> </div> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-3261076-1"); pageTracker._initData(); pageTracker._trackPageview(); </script> </body> </html>