CREATING THE SUPPLEMENTAL CSS STYLE RULES (ADVANCED.CSS) - Page 5

The stylesheet, advanced.css, contains the style rules that are recognized only by browsers that recognize @import. It contains all of the positioning rules for the page, as well as some rules that override those in common.css.

1. Create new margin: property style rules for the p and h1 elements.

   In the common.css stylesheet, we specified 3em margin values for these, but on our "real" layout we want 0px margins. Therefore, we'll override the rules previously specified in common.css by creating new rules that are declared !important.

h1, p {
      margin: 0px !important;
      }

2. Create the style rules for the .tableft and .tabright class selectors that specify the background-image property rules for each.

.tableft { 
         background-image: url(../images/tableft.gif);
         }

.tabright { 
         background-image: url(../images/tabright.gif);
         }

3. Create the style rules for the #tabmiddle1, #tabmiddle2, #tabmiddle3, #tabmiddle4, and #tabmiddle5 ID selectors.

   1. These are the middle table cells of each tab table. Note that the font-size: 12px rule is specified as !important. This overrides the font-size: 18px rule set in common.css.

#tabmiddle1, #tabmiddle2, #tabmiddle3, #tabmiddle4,#tabmiddle5 {
          background-image: url(../images/middle.gif);
          text-align: center; 
          font-size: 12px !important;
          font-weight: bold;
          color: #999999;
          cursor: arrow;
          }

4. Create the style rules for the #tab1, #tab2, #tab3, #tab4, and #tab5 div elements.

   These are the div elements that hold the tab tables. Note that all the div elements are specified as position:absolute. The initial z-index is set to 0.

#tab1, #tab2, #tab3, #tab4, #tab5 {
      position:absolute;
      height: 24px;
      top: 77px;
      z-index: 0;
      background-color: #cccccc;
      color: #999999;
      }

#tab1 {
      left: 60px;
      }

#tab2 {
      left: 140px;
      z-index: 0;
      }

#tab3 {
      left: 235px;
      }

#tab4 {
      left: 335px;
      }

#tab5 {
      left: 410px;
      }

5. Create the style rules for the ID selectors #box1, #box2, #box3, #box4 and #box5.

   These are the div elements that contain the main content. The content boxes all have a one-pixel wide black border and are absolutely positioned like the tab boxes. The height and width are specified in absolute (pixel) values.

#box1, #box2, #box3, #box4, #box5 {
      position: absolute;
      top: 100px;
      left: 50px;
      width: 415px;
      height: 320px;
      z-index: 0;
      padding: 10px;
      background-color: #ffffff;
      border: 1px solid #000000;
      }

CREATING THE MAIN CSS STYLESHEET (COMMON.CSS) - Page 4
JavaScript + CSS + DOM Magic
CREATING THE BASIC DOCUMENT OBJECT CREATION SCRIPT (DOCOBJ.JS) - Page 6