Categories
Current category items
Post title

Pure CSS: Window Layout

Post content
Annotation
You have no idea what it's all about? See it before you read it! You got the idea and ready to roll? Download it right away! If not, please read below.
Date created
Posted in "Web" at May 13th, 2008
Tags
Ad
Article

This time I want to uncover a custom approach of a Full Window CSS Layout solution for those of you who are trying to design complex CSS driven websites, such as: web-based software, custom autonomous scrollable and static spaces and for those who are working on to replace their existing HTML frameset structure or full window table driven layouts with a simplified CSS template.

The main features of this layout are: (1) it’s fully flexible or fluid, if you will, — it occupies the full height and width of the browser window and readjusts itself on window resize; (2) it has 5 commonly used spaces or bars, as they call it, that is: header (static), sidebar (scrollable), mainbar (scrollable), ad space (static), and footer (static); (3) built-in flexibility — it can be modified easily to fit your personal needs.

Also check out the technical specifications. It’s (1) pure, valid CSS with no invalid CSS hacks; (2) tableless, JavaScript free; (3) cross-browser friendly, tested on IE5+, FF1+, Opera7+ and Safari2+; (4) fully accessible, no frames whatsoever.

However, this time I won’t be explaining CSS code line by line as I had been doing previously. I just want to draw your attention to things and limitations that have to be taken into account, if you want to successfully use this project.

Use a CSS reseting tool

It is becoming more and more common to use a CSS resetting tool. Same here. I am using my own reset.css file. This resets the default browser styling, saves time and space. It will be included in the project files — please note that.

Keep CSS layout sep

Thing number two is to keep the CSS that defines and controls the layout in a separate CSS file. As you will/can see in the project files I have the layout defined in a separate layout.css file. I can think of two good reasons for that: (1) it will keep you organized, there is a great practice of discerning two types of CSS definitions, that is, layout and theme; (2) another technical issue is that we want IE5 to ignore and not read some of the CSS lines that might lead it to a crash. So we put those lines at the very bottom of this separate CSS file and break line above them with an inline high pass filter:

i{content:"\"/*"}

This is an absolutely valid CSS code. It will make IE5 ignore everything that is below this line.

Put IE in ‘quirks mode’

That’s right, this approach works only if IE6 or earlier is in the so called ‘quirks mode’. This is mainly because I want to exploit IE’s box model glitch. For those who still don’t know how to put IE into ‘quirks mode’, I have two bits of code. To do that you need to put something that would look like a HTML comment on the very first line of your HTML document, before the doctype element. It can be the xml prologue:

<?xml version="1.0" encoding="utf-8"?>

…or just a simple HTML comment:

<!-- -->

Some of you might consider this as a drawback and, yes, I agree that in some cases, having IE with this mode on, is inconvenient. So we have to keep this limitation in mind.

Download & Preview

If you manage to keep everything else you add clean, you should have a nicely working, valid CSS only Full Window CSS Layout solution.

If you got any comments, questions or bug reports don’t hesitate to leave a reply below. Also you can check other related pure css topics for more css driven solutions.

Have fun!

This entry was posted on Tuesday, May 13th, 2008 at 3:10 pm and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Blog navigation
Comments

Comments

Leave a Reply

  • (will not be published)
Footer