Free Tableless CSS Layout Generator
The FrameWork Sites CMS comes complete with tools to create tableless design layouts in compliance with W3C standards and XHTML Strict 1.0. What that means for you is that your pages will be compatible with more browsers and more devices. Your pages will load faster and will have better forward-compatibility with future browser versions. Because we know how useful this tool is, we published it live on our site to be used by anyone wishing to create standards-compliant websites in a snap.
How does it work?
To use the tool, click the left and right buttons to add cells to your layout until you have it just right. The XHTML and CSS are created for you below. Just cut and paste this code into whatever you are working on. This tool is intended to be used as a starting to point to create well formed W3C compliant documents.
Padding-bottom: 1000, Margin-bottom: -1000, Huh?
This technique is used to create spanning areas for background colors and images so they will extend to the full length of a container. By default they are set up in the templates created, but can easly be taken out. To remove them just delete the following lines from your CSS wherever they are present:
padding-bottom: 1000em;
margin-bottom: -1000em;
overflow:hidden;
We use them more times than not, so we have them in as the default method, but they are easy enough to delete if they don't apply.
Shortcuts and Hints:
We use this tool as a foundation for most every project we create with FrameWork Sites. Here are a couple of tips to save you some time when working with your new template to maximize its browser compatibility.
- When applying padding or margins to your css, never apply it to anything with an idea that starts with the default #loc. this can create problems with some versions of IE, and could make your width math more difficult to manage. Always add divs inside the #loc containers to apply padding or margins - this will save you time when making minor changes later.
- For maximum browser compatibility, always use this method to include your CSS:
<link rel="stylesheet" type="text/css" href="/yourDirectory/yourStyle.css"/> - If you want to put your CSS inline, make sure you include it the following manor:
<head> ....
<style type="text/css">
PASTE CSS HERE
</style>
... </head>
