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:

• HTML
  
• CSS
  
• Javascript