Simulation of Frames with CSS

Here we describe the style sheet behind the whole frames simulation. The three major rules of the style sheet which give us the present layout are the mastHead, linkIndex, and contentsBox IDs. They have been defined as IDs rather than classes because we use them only once in each of our page. Let us ponder over each of these IDs for better understanding.

mastHead

mastHead defines the mast/banner frame of our web site. It is placed on the top of the browser and would usually contain a logo or similar stuff related to the website.

/* Mast head is simulation of top frame */
#mastHead{ position: fixed;
           top: 0px;
           left: 0px;
           width: 100%;
           height: 100px;
           z-index: 1;
           background-color: #CCC;
           border: 2px solid #0000DD;
           }

Here the position: fixed; rule keeps the mastHead fixed at the position relative to the viewport(i.e. browser window). The top: 0px; and left: 0px; rules define the position of our banner, and width: 100%; tells the client to spread the banner over total width of the viewport. These 4 rules give us our banner, and the height: 100px; defines it height. We have used an absolute unit for the banner's height to easily fit the left navigation "frame" just below it. The z-index rule will become apparent when we discuss the contentsBox style definition.

linkIndex

The linkIndex acts as the frame which seldom changes and is provided for navigational purposes. The following code shows that the linkIndex is positioned in the same fashion as mastHead. It has a fixed position, and fixed to the left edge of the browser with the left: 0px; rule. The top: 104px; rule is important as it determines as to where the linkIndex box will be placed vertically. The vertical displacement depends on the height of the banner. When designing a page you can refer to the box model for calculating displacements and precise placements.

/* Link Index is the simulation of left index/browsing frame */
#linkIndex{ position: fixed;
            left: 0px;
            top: 104px;
            width: 200px;
            border: 2px solid #DD0000;
            padding: 3px;
            }

The linkIndex looks pretty simple and has a default style here. Check the "Improvements" section to see how you can play with it more.

contentsBox

The contentsBox is our main display area. All the content to be shown by clicking the links from the left panel is displayed in this area. It acts as the frame used for displaying in the frames version.

#contentsBox{ position: relative;
              margin-top: 104px;
              margin-left: 215px;
              border: 2px solid #00DD33;
              padding: 0px 5px;
              }

This section is positioned relative unlike the other two. The reason is that we want this section to scroll and not to be fixed to the viewport like the mastHead and linkIndex. Because the only other content we have in our web page is positioned fixed, our contentsBox will be positioned at the top-left of the viewport, and because it is rendered after the mastHead and linkIndex sections, it will appear above them if overlapping occurs.

For positioning we use the margin-top and margin-left rules. This enables the contentsBox to be placed below the mastHead but to the immediate right of linkIndex. For the overlapping problem while scrolling the content we add a z-index: 1 rule to the mastHead to bring it on top.

The Stylesheet