Wednesday, February 28, 2007

CSS Notebook Layout

Ever wanted a notebook style layout on a web page?



Well, I sure did. And I spent the better portion of the day fighting with it making it work right. You can find a small example page here.

Here are the important parts of the CSS and Javascript:

For the 'tabs':

.tab {
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
vertical-align: middle;
text-align: left;
color: blue;
cursor: pointer;
}


Each tab also has it's initial 'background-color' set.

Here is the corresponding HTML:

<div>
<span id="page1Tab" class="tab" onclick="showPage('page1');">
Page 1
</span>
<span id="page2Tab" class="tab" onclick="showPage('page2');">
Page 2
</span>
<span id="page3Tab" class="tab" onclick="showPage('page3');" style="border-right: 1px solid black">
Page 3
</span>
</div>


It's important to note that for the frame to properly line up with the bottom of the buttons that it needs to have it's 'margin-top' identical to the tabs 'padding-bottom'. This is what my "content" frame looks like:

div#content {
width: 95%;
border: 1px solid black;
margin-top: 5px;
background-color: #B5BBD5;
}


I'm using <fieldset> tags with <legend> tags in my example to get the neat looking frame.

Finally, here are links to the HTML, CSS, and Javascript files: