Hey! I have this site that I am trying my best to only use CSS but could do with some help. http://www.domestic-energy-assessor.org.uk/ If you look you will see that I am using tables and that is what I really want to get rid of but I want the layout to be the same. Thanks in advance for any help!
Hopefully not completely the same since it's broken in Opera and FF You know, looking at this all you really need to do is flat delete the table code. This is probably how I'd do the HTML: <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Domestic Energy Assessor</title> <link rel="stylesheet" type="text/css" href="screen.css" media="screen, projection"/> </head><body> <div id="wrapper"> <h1><b>D</b>omestic <b>E</b>nergy <b>A</b>ssessor</h1> <ul id="navigation"> <li><a href="/">Home</a></li> <li><a href="/">About Us</a></li> <li><a href="/">FAQ</a></li> <li><a href="/">Testimonials</a></li> <li><a href="/">Links</a></li> <li><a href="/">Contact Us</a></li> </ul> <div id="content"> <img src="images/image_001.jpg" class="content_image"> width="350" height="233" alt="" /> <h2><b>W</b>elcome</h2> <p> Do you require a Domestic Energy Assessor to provide you with an Energy Performance Certificate? **Make this some sort of catchy question** </p><p> We are a small team of Domestic Energy Assessors based in the Penn Hill area of Poole, Dorset. Covering the Poole, Bournemouth and surrounding areas, we can provide you with a fast, efficient and professional service. Fully accredited and approved through xxx. We aim to provide you with excellent customer service... </p><p> If you would like to discuss Energy Performance Assessments we will be happy to assist you </p><p> To book an Energy Assessment on your property call xxxxxx, or email for an appointment. </p> </div> <div id="footer"> <ul> <li class="first"><a href="/">Home</a></li> <li>What Is An Energy Performance Certificate</li> <li>What Is A Home Information Pack</li> <li>Coverage And Availability</li> <li>How To Make Your Home More Energy Efficient</li> <li><a href="/links.html">Links</a></li> <li><a href="/about-us.html">About Us</a></li> <li><a href="/testimonials.html">Testimonials</a></li> <li><a href="/contact.html">Contact Us</a></li> </ul> <p> Domestic-Energy-Assessor.org.uk © 2007. All rights reserved, <a href="http://www.bluenotesolutions.com">Web Design </a> By Bluenote Solutions </p> </div> </div> </body></html> Code (markup): That original isn't really all that bad once you delete the table and replace the footer SPAN with a DIV. The wrapper is good, we can use that to center and apply that 1px white border... there is no reason for the table so straight into our h1 - if we pad the bottom of the h1 enough we can apply that bg_002.gif image as a background-image center bottom. The SPAN to mark the green letters is a little... bulky. Really what you are doing is styling them as standouts without adding any semantic meaning to them - that's what a bold tag is for. The UL can also be directly styled, inlined and padded... No reason for that to be wrapped and in fact, that SPAN around it is invalid HTML We'll wrap the content area in a DIV to make padding it and it's contents easy - Inline the image 'image_001' as that is content, in the CSS float it right before the text. The H2 is good, but again I'd swap the span for b, paragraphs are also just fine though I'd mark them up different and with formatting... again that bottom image 'break' I'd style as a background, though in this case I would put it as the TOP of the footer. The footer should be wrapped by a div not a span, and that top part is a list of links so make it a list of links. The second part is 'kind of' a paragraph so mark that up as such, making all those extra line-breaks pointless. Fairly simple. CSS to follow.
Ok, here's the css: http://battletech.hopto.org/for_others/gobbly2100/screen.css and a working copy: http://battletech.hopto.org/for_others/gobbly2100/template.html the directory: http://battletech.hopto.org/for_others/gobbly2100 is unlocked so you can grab the versions of the images I recut. (nothing major here, just some filesize reduction and corner cutting) The CSS is fairly straighforward - the footer got a bit more code to style that list, but the rest of it got a lot of code reduction. It's worth noting I had to change the html in that footer slightly from above, moving the close of the LI to the start of the next line to 'trick' the parser into not inserting spaces. Stupid trick, but if it's stupid and it's works... Oh, I also cut it down to three ascii periods instead of the five entities because it's bad grammar to use more than three - and why confuse things when three periods work just fine. Most of the spacing and padding on the CSS was done using line-height on 'single elements' and margin/padding as needed. I left the bold font-weight on the body text - I'd REALLY suggest losing that, it's kind of harsh on the eyes.
Oh awesome, thanks for doing that, I really appreciate it, I am going to check all the code and also see if I can learn anything from it too. You been a great help