SEO Scrolling Frames Problem Solved
(Page 1 of 4 )
In this article, I show you how you can keep certain information on a web page visible, while another portion of the web page is scrollable, without using frames, because search engines do not index pages with frames. This is not the only reason to use frames, but if it's the reason you use them, then you now have a solution to the search engine problem. I will present the solution similar to the way that I discovered it.
The Problem
The HTML specification states, “HTML frames allow authors to present documents in multiple views, which may be independent windows or subwindows. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or replaced.” So HTML frames serve two purposes:
- They offer authors a way to keep certain information visible, while another portion of the web page is scrolled.
- They offer authors a way to keep certain information visible, while another portion of the web page is replaced (by a linked resource).
All this is good. Authors like this. The problem is that a web page made up of frames can't be indexed by search engines. So if you have a web page made up of frames, that page would not enter a search engine's index as it deserves.
Block Level Element with Scroll Bars
Can block level elements be given scroll bars? Yes! There is a CSS positioning property called “overflow.” This property can take the value of “scroll;” it can also take the value of “Hidden.” If you have a block level element and you give it a width and height, and then you also give it the CSS property “overflow: scroll,” the block level element will develop horizontal and vertical scroll bars. When the block level element takes up more elements than the dimensions you provided, you would be able to see the clipped elements using the scroll bars.
The following code produces an empty DIV element with scroll bars. Try the code (save it as an HTML file and open it with a browser). The DIV element has been given a border because I want you to realize that the scroll bars take up space within the block.
<html>
<head>
<style type="text/css">
div {width:200px; height:200px; overflow:scroll; border:1px solid black}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
If the content of the block level element is empty or not full, the scroll bars should appear, but they should also be disabled.
If the content of the block level element takes up more space than the dimensions you provided, then the browser will enable the scroll bars. The following code demonstrates this. You can try it.
<html>
<head>
<style type="text/css">
div {width:200px; height:200px; overflow:scroll; white-space:nowrap}
</style>
</head>
<body>
<div>
element element element element element element element Line End <br />
element element element element element element element Line End <br />
element element element element element element element Line End <br />
element element element element element element element Line End <br />
element element element element element element element Line End <br />
element element element element element element element Line End <br />
element element element element element element element Line End <br />
element element element element element element element Line End <br />
element element element element element element element Line End <br />
element element element element element element element Line End <br />
element element element element element element element Line End <br />
element element element element element element element Line End <br />
element element element element element element element Line End <br />
</div>
</body>
</html>
If any block level element (including the BODY element) contains more than enough elements and you give it the property “overflow: hidden,” the scroll-bars will not appear, but the extra elements will be clipped off.
Next: The Trial Phase >>
More Style Sheets Articles
More By Chrysanthus Forcha
