Fixed Header: Emulating the Frameset

Dare I write this? I used to love framesets.

In these enlightened times, everyone knows that frames suck. Yet, despite their many drawbacks, frames do have at least one major benefit: they provide a means to keep important elements of a page static - for example, a menu can remain visible in one column while content is scrolled in another. In my opinion, this is a great feature from a usability perspective.

Because of this, frames are still quite widely used. Indeed, I have built many frames-based websites myself, when I was less well-informed (and no, I'm not going to provide links, I couldn't stand the laughter).

Now, whilst I wouldn't use the frameset for any new website, I still like the idea of having a fixed column for navigation, or other important controls. On some sites (a corporate intranet, a "knowledge base", a web application, etc) it is beneficial to the user if these controls are always in place. I wanted to see if it is possible to achieve a frameset effect with CSS. I discovered that, not only is it possible, it is also extremely easy to emulate frames.

This page has a static header (note: this does not work with Microsoft's Internet Explorer). As you scroll the page, the header - with the main navigation controls - remains in place. The navigation is always available and the branding is always visible. No longer do you have to scroll up to move to another area of the site.

This effect is achieved with minuscule code in the stylesheet:

#headerArea { width: 100%; position: fixed; z-index: 1000; top: 0;}
#contentArea { margin-top: 163px; margin-bottom: 50px; }
* html #contentArea { margin-top: 0; }
#faderBottom { width: 100%; background: url(/assets/template.graphics/fader_bottom.png) repeat-x; position: fixed; z-index: 1000; height: 50px; bottom: 0px; }
#faderTop { width: 100%; background: url(/assets/template.graphics/fader_top.png) repeat-x; position: fixed; z-index: 1000; height: 50px; top: 123px; }
* html #faderBottom, * html #faderTop { display: none; }

The "headerArea" is locked in place with the "position: fixed" directive. I also give the header a high "z-index" as, in order to achieve the effect, the regular content has to scroll "beneath" it. I then offset my "contentArea" to accommodate the fixed header ("margin-top: 163px;").

I want the page to degrade gracefully in IE. I use "* html #contentArea { margin-top: 0; }", which very effectively countermands the two preceeding styles and is only effected by Internet Explorer.

To add a little gloss to the virtual frameset I have used an alpha-faded PNG at the top and bottom of the "contentArea" to provide a neat fade effect at the edges. The faders are also in a fixed position and share the same "z-index" as the "headerArea".

In the end, I decided not to employ this technique on the Urban Mainframe. However, I could well use this elsewhere - particular within the "back-office" control panels of my websites.

Article ends. The remaining content is simply filler, to illustrate the effect...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam neque turpis, nonummy et, interdum vel, mollis sed, orci. Aenean accumsan ligula a mauris. Vestibulum elementum orci eget arcu. Aliquam accumsan. Aliquam turpis metus, accumsan non, tristique non, varius sed, enim. Phasellus ut turpis. Cras sed leo. Cras sagittis elit sit amet massa. Quisque fringilla. Nullam non urna quis quam iaculis ornare. Ut massa. Ut augue. Mauris semper. Nunc tincidunt ultrices velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean a tellus quis lorem tincidunt condimentum. Ut tempor, sem ultricies mollis consequat, sapien risus porta diam, a pulvinar urna orci et magna. Fusce pellentesque molestie lacus. Cras ullamcorper.

Nunc viverra lorem in odio. Vestibulum id sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tortor. Duis feugiat, arcu non convallis nonummy, nunc nisl dapibus urna, id sollicitudin wisi magna id nunc. Sed eu enim. Morbi eget velit sit amet ipsum pharetra consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate cursus velit. Nunc euismod. Etiam sagittis consequat nisl. Praesent gravida. Etiam turpis nulla, bibendum nec, dictum vel, consectetuer at, metus.

Duis eu enim quis tortor cursus consequat. Nam imperdiet. Maecenas sed mi. Pellentesque mollis mauris ac dolor. Proin lacinia. Nam nonummy condimentum ligula. Morbi dignissim. Nulla bibendum pellentesque augue. Aliquam justo libero, tristique sollicitudin, posuere elementum, condimentum sed, sapien. Pellentesque egestas placerat ante.

Aenean sagittis turpis sit amet metus. Nulla dignissim aliquam eros. Sed rutrum tortor eu ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tortor. Sed eu orci mollis mi porttitor adipiscing. Donec felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ut est quis enim nonummy tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus pellentesque, arcu at eleifend mattis, purus magna fermentum nibh, quis blandit tellus nisl gravida urna. Nulla diam turpis, dignissim sit amet, laoreet sed, volutpat nec, ante. Duis urna leo, tempus sed, tristique vel, blandit blandit, sapien. Ut wisi est, blandit id, pretium adipiscing, ultricies non, odio. Nam ac sapien eu orci auctor auctor. Vivamus id libero. Donec fermentum, justo quis consequat varius, mi odio placerat pede, accumsan lobortis eros est nec diam.

Duis enim. Donec id sapien quis tellus malesuada elementum. Duis erat purus, blandit in, volutpat et, ullamcorper quis, nunc. Fusce non nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque sem lacus, bibendum et, dignissim at, bibendum sit amet, neque. Aenean vestibulum, orci eget iaculis pharetra, felis augue volutpat ligula, non vehicula enim libero nec dolor. Phasellus vestibulum bibendum metus. Sed feugiat nulla in metus. Vivamus accumsan. Vivamus lectus magna, auctor sed, ultrices non, sodales et, purus. Nunc tellus urna, dictum sed, congue et, rhoncus eu, risus.