Update 14-10-2008: I updated the liquid layout stylesheet. It is now simpler and works fine in safari as well. I added an attachment (LuaLayoutStatic.zip) containing three html examples and the stylesheets and updated the original template in this post. The static one can be found in an additional post, cause only one attachment can be added unfortunately....
Creating a XHTML tableless layout can be a very tedious and difficult task. There are a number of templates and css generators out there, like clevatreva's piefecta layout, but none we're exactly to my liking. During the projects I have worked on the past couple of years I've developed and improved upon a 3 column layout that takes into account alot of common elements you'd want in such a layout. Loads of developers are struggling to get their layouts right and are being destracted from the actual task at hand. A couple of days ago I got triggered to do something about it.
I have a created (let's call it version 1) of a flexible 3 column layout. The layout uses a minimal number of css hacks, absolute positioned elements (i like it better without) and works in most common browsers. At the time of writing, the layout is working to my liking in Opera, Firefox, and IE5+. I'll test it on the Mac (firefox and safari) this week Futhermore, it's SEO optimised, by which I mean that the most important page elements (the content) are placed first in the source order, then the content related container, then the navigational elements.
Some additional features of the layout (which I have called
Lua, by the way)
- Spreads to the bottom of the page, regardsless of the amount of content. The footer is always positioned to the bottom of the page.
- Relative measures: All elements are sized in relation to the body font size, meaning that upon increasing/decreasing the font (in your browser menu, in your body css or using your scroll wheel) all elements will scale accordingly.
- A tabbed css only menu example (based on suckerfish). The flyout menu also includes an alpha transparent border example when hovered. For IE this behaviour is activated using a htc file (which I got from positioniseverything.)
- An optional shadowborder to create an 'hovering effect' for your panel on the background
- A contrast stylesheet setting all elements to a black and white version for accessibility purposes
- Full height column to enable backgrounds for sidebars
The layout can be used as panel (a restricted-width container) or as a Liquid layout, spreading the contentarea to whatever space is available. It is designed to spread to the full height of the page and has been created using Firefox 3. Whereever necessary adjustments for IE browser versions are included using conditional IE includes. These are not supported by .Net's theme feature, the main reason I am not making this available as a theme.
Liquid behaviour is disabled by default, but can simply be enabled by adding an extra css file (commented in the source).
I offer the entire package as a download. I created a Visual Studio 2008 template for it, to get you going quickly. This template also includes some .Net features I've grown accustomed to, like adding the ability to include an extra stylesheet in a Masterpage or Nested Masterpage using Masterpage and .aspx basepage properties. Examples are readily available in the template. I added some rendered html output examples as well, displaying the flexibility added by including certain stylesheets in the main masterpage. To use these html examples, simply place them in the root.
As a finale note: I have written a few exceptions for IE5 and IE5.5 that are specific for the liquid layout. You might want to disable those if you're not using it. Also, there are some css alternatives I have written and added as comments in the css.
Let me know what you think and please report bugs :-)
Hope this helps,
Rinze