Home arrow Style Sheets arrow SEO Scrolling Frames Problem Solved
STYLE SHEETS

SEO Scrolling Frames Problem Solved


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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
May 27, 2008
TABLE OF CONTENTS:
  1. · SEO Scrolling Frames Problem Solved
  2. · The Trial Phase
  3. · What I Came Up With
  4. · Final Phase

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
SEO Scrolling Frames Problem Solved
(Page 1 of 4 )

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:

  1. They offer authors a way to keep certain information visible, while another portion of the web page is scrolled.
  2. 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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 1 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials