design reverb

The html is just three divs: header, content and footer. Here’s a quick look at the css for the header and footer:

#header {
background-color:#000000;
color:#ffffff;
top:0;
position:fixed;
height:80px;
width:100%;
}

#footer {
background-color:#000000;
color:#ffffff;
bottom: 0;
position: fixed;
height:80px;
width:100%;
overflow: hidden;
z-index: 100;
}

We use position:fixed so that both the footer and header remain in place as the page is scrolled and to keep the position relative to the browser window no matter what positioning the parent element has. Using the offset properties top and bottom, we tell the browser specifically where to position these elements. Using top and bottom on the #content element, we imply a height for the element.

#content {
padding:0;
margin: 0;
top:80px;
bottom:80px;
position:fixed;
width:100%;
overflow:auto;
}

Then if you like, you could use a server side include (SSI) for the content, as I have done here: http://designreverb.com/test_noFrames.php. Here I have the same header, content and footer divs. The content is being called from another page: some_content.shtml. (The page could just have easily been .htm, .php, .html …etc. )

<div id="content"> <p>content</p>
<?php include 'some_content.shtml'?>
</div>

This works great, but you’re ‘test_noFrames’ page will have to be a .php file (test_noFrames.php instead of test_noFrames.htm) like this: http://designreverb.com/test_noFrames.php and http://designreverb.com/some_content.shtml (these url’s ar live so check them out)

NOTE: This has only been tested in IE7 and Firefox 2.0. 🙂
Questions? Comments? Lemme know.

The ALA Primer: A Guide for New Readers great compilation of artilces for those with some familiarity with html, css and other basic web concepts.

If you’re going to build a house—or a website—you need the right tools. A List Apart offers hundreds of articles on design, markup, style, accessibility, usability, and more. We’ve selected a few that you might want to start with. (Think of this guide as one of those reassuring brochures from Lowe’s or Home Depot, but about websites instead of ceramic tile.)

ALA’s article runs the gambit from design theory and layout to web standards and server-side code. So give it a browse, you may learn something you didn’t already know.