I inherited a website that was entirely put together using tables. While tables are very useful for tabular data, I'm aware that they're not the best way to do website formatting because they add a whole lot of code to a page and that does not make the actual text of the page easily searchable.
The website I have inherited is: http://www.clarkelandscapes.com
It is template-based. I would much rather use XML and CSS to format this puppy and I have created a template that does the job but all of the <divs> have to be absolute positioned and I know that's not the way to work this site.
I need to set up three or four <div> areas for this website. One is navigation, the second is the top area where you have two graphics, the third is for the company's logo and slogan and he fourth is for editable content in a template.
I did this and I had to use absolute positioning to get everything to fit. But I know there is a nested way to do this where everything fits simply and the background images will all fit together like a jigsaw puzzle.
Obviously, since I have one background graphic (in the navigation area) that is in a table, this website does not comply with XHTML standards. I also have a fair amount of code in the website that is legacy stuff that needs to be cleared out (there are also lots of orphaned pages and graphics that need to be trashed as well).
Can anyone set me on the right path to lay out these divs so that they all connect, all of the background images fit together in all browsers and so I can haul this website into the 21st century? I know that, going forward, I'll need to revise more and more of this website and I would just as soon start with something that works.
A 2-column layout with floats is all you need for this. No APDivs required.