June 5, 200818 yr Hi there, The site I am working on is going alright. Only problem is that for some strange reason, no matter how many times I write and delete : <div id="footer"> This is my footer </div> (by the way, the text appears but not background formatting etc) <!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 name="author" content="Michael Gainford" /> <meta name="keywords" content="Groundworks, Liverpool, Flagging, Drainage, Domestic Extensions, Skip Hire, Plant Hire, Muck Shift, Barratt Homes" /> <meta name="description" content="The official website of S&S Groundworks" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>S&S Groundworks - Top quality workmanship in the North West of England</title> <link href="sands.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> </head> <body> <div id="container"> <div id="header"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Contact Us</a></li> </ul> <div class="clearfix"></div> </div> <div id="content"> <div id="content_left"> <div class="left_main"> <p>** Welcome to S&S Groundworks, we are of the North-Wests leading groundworks companies. Should you require any further information, please click <a href="#">here</a> or drop us a line.</p> </div> <br /> <div class="left_links"> <h2>What we Do?</h2> <ul> <li><a href="#">Groundworks</a></li> <li><a href="#">Extensions</a></li> <li><a href="#">Muck Shifting</a></li> <li><a href="#">Flagging</a></li> <li><a href="#">Underpinning</a></li> <li><a href="#">Remedial Works</a></li> <li><a href="#">Flagging</a></li> <li><a href="#">Underpinning</a></li> <li><a href="#">Remedial Works</a></li> <li><a href="#">Flagging</a></li> <li><a href="#">Underpinning</a></li> <li><a href="#">Remedial Works</a></li> <li><a href="#">Flagging</a></li> <li><a href="#">Underpinning</a></li> <li><a href="#">Remedial Works</a></li> <ul> </div> <div class="leftbottomimg">This is my image at the bottom left of the pic </div> </div> <div id="content_right"> <div class="index_image"> <img src="Images/white_strip.jpg" alt="S&S Groundworks" title="S&S Groundworks" height="3px" width="575px"/> <img src="Images/machine.jpg" alt="S&S Groundworks" title="S&S Groundworks" height="150px" width="575px"/> <img src="Images/Contactdetsbk.jpg" alt="S&S Groundworks" title="S&S Groundworks" height="35px" width="575px"/> <img src="Images/white_strip.jpg" alt="S&S Groundworks" title="S&S Groundworks" height="5px" width="575px"/> </div> <div class="index_intro"> <div class="left_intro"> <h1>COMMERCIAL GROUNDWORKS</h1> <p>Here at S&S Groundworks we work with a large number of developers and Contractors to undertake groundworks and civil engineering projects ranging from £10,000 - £4,000,000.<p> <p>We pride ourselves on quality whilst ensuring projects remain on budget and within agreed timelines.</p> </div> <div class="right_intro"> <h1>DOMESTIC GROUNDWORKS</h1> <p>With many years of experience and enthusiasm we can assist with all aspects of groundworks, landscaping and general building.<p> </div> <div class="right_intro"> <h1>MUCK SHIFTING</h1> <p>We own a fleet of 32 ton + wagons available for out right hire or muck shifting.<p> <p>For an enquiries relating to anything in this section, please contact Gary Hobin on 07816 138 543.<p> </div> </div> <div class="bottom_image"> </div> </div> <div class="clearfix"></div> <div id="footer"> This is the footer </div> </div> </div> </body> </html> Thanks for your help guys!
June 5, 200818 yr Sorry, didnt catch what the problem is. You have a link to demonstrate? What happens and what is supposed to happen?
June 5, 200818 yr Author /* Main Content Of The Site -------------------------------------------------------*/ * { margin: 0; padding: 0;} body { background-color: #6495ED; font-family: Tahoma, Verdana, Arial; font-size: 13px; margin: 0;} #container { margin: auto; margin-top: 15px; width: 904px;} #footer { background-color: red:} #header { background-color: #006; color: white;} #content {} #content_left { background-color: #006; float: left; width: 250px;} #content_right { background-color: #006; border-left: 2px solid black; float: right; width: 652px;} /* Fixes ---------------------------------------------------------- */ .clearfix { clear: both;} /* Images -----------------------------------------------------------*/ .logo { float: left; padding: 0px 0px 20px 10px;} img { border: 0;} /* Main Navigation -------------------------------------------------------*/ #header ul li { background-color: #006; list-style-type: none; margin: 0; padding: 0;} #header ul li { float: right;} #header ul li a, #header ul li a:visited { color: white; float: left; font-weight: bold; padding: 10px 15px; text-decoration: none;} #header ul li a:hover{ background-color: black; color: white;} /* Left Main Navigation -------------------------------------------------------*/ .left_links h2 { background-color: white; color: #006; font-size: 0.9em; font-weight: normal; padding: 20px 0px 15px 15px;} .left_links ul { background-color: #006; color: white; margin: 0; padding: 10px 0px 1px 10px;} .left_links ul li { list-style-type: none; padding: 3px 0px;} .left_links ul li a, .left_links ul li a:visited { color: white; padding: 10px 15px; text-decoration: none;} .left_links ul li a:hover { background-color: black; color: white;} /* Main Page Introduction -------------------------------------------------------*/ .index_intro { margin: 15px 15px 25px 15px;} .index_intro h1 { background-color: yellow; border-bottom: 1px solid #006; color: black; font-family: Tahoma; font-size: 1.1em; font-weight: normal; margin: 0; padding: 5px 5px 5px 5px; text-align: center;} .index_intro p { padding: 5px 5px 5px 5px;} .index_image { padding: 0px 0px 0px 40px;} /* Left Introduction -------------------------------------------------------*/ .left_main { background-color: #006; color: yellow; font-size: 1.1em; padding: 5px 10px 10px 10px;} .left_main a { color: white; text-decoration: none;} .left_links ul li a:hover { background-color: black; color: white;} .left_intro { background-color: white; border: 1px solid black; color: #006; float: left; margin: 0px 10px 0px 30px; padding: 0px 0px 0px 0px; text-align: center; width: 250px;} .left intro h1 { color: yellow;} /* Right Introduction -------------------------------------------------------*/ .right_intro { background-color: white; border: 1px solid black; color: #006; float: right; margin: 0px 30px 0px 10px; padding: 0px 0px 0px 0px; width: 250px;} /* Bottom of Introduction -------------------------------------------------------*/ .bottom_image { height: 100px; width: 600px; .leftbottomimg { color: yellow;} /* Footer Formatting -------------------------------------------------------*/ The CSS in the footer area is not working!!
June 5, 200818 yr Author FFS!! Ignore this, sorry guys. Seems I have put a ":" instead of a ";" so that caused the problem!! Thanks anyway.
June 5, 200818 yr heh, no worries, been there many a time. for future reference, little bugs like that can be highlighted by just whipping your css through a validator. Can save a lot of time and hair tearing! W3 CSS Validator: http://jigsaw.w3.org/css-validator/#validate_by_input
Create an account or sign in to comment