SEO Scrolling Frames Problem Solved - The Trial Phase
(Page 2 of 4 )
With all of the above in mind, I decided to mimic (without using frames) a frame-set called "The Banner and Contents Frameset," using only one BODY element. The following diagram illustrates this:
Fig.1. Banner and Content layout
With this layout, the Header portion does not move. The Sidebar has the links for different pages. The Main section has scroll bars. The information in the Header and Sidebar remain in their positions while the Main section is scrolled. This is what we want; it satisfies the first purpose of having frames.
I made the Header portion a DIV element. I gave it a width of 100% in CSS. I gave it a height of 20% in CSS. I made the Sidebar a DIV element and gave it a width of 25% and a height of 80%. Note: if the height of the header is 20%, then the height of the sidebar has to be 80% for the entire height of the window’s client area to be covered.
I made the Main portion a DIV element and gave it a width of 75% and a height of 80%. Note: if the width of the Sidebar is 25%, then the width of the main portion has to be 75% for the entire width of the window's client area to be covered.
I gave the DIV element for the Main portion scroll bars with the CSS property “overflow:scroll.” Note: any block level element, by default, begins with a line break and ends with a line break. So a block level element does not allow an element on its sides by default. Thus, by default, the DIV element for the main portion is supposed to appear below the DIV element for the Sidebar.
To make these block level elements appear horizontally on the same line, side-by-side, I converted them to inline elements by giving each of them the CSS property “display:inline.” This cancels the effect of the line breaks before and after their blocks. An inline element allows other elements on its sides, so the Sidebar and Main portions can appear next to one another on the same horizontal line. I gave the three different regions borders, so that I could see the demarcations on the web page. The next page has the code I arrived at. You can try it.
Next: What I Came Up With >>
More Style Sheets Articles
More By Chrysanthus Forcha
