Home arrow Style Sheets arrow Page 3 - 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 - What I Came Up With
(Page 3 of 4 )

<html>

<!-- Banner and Contents -->

<head>

<style type="text/css">

h1 {text-align:center}

body {background-color:Aqua}

div#header {width:100%; height:20%; border:1px solid black; padding:0px; margin:0px}

div#left {width:25%; height:80%; display:inline; border:1px solid black;
padding:15px; margin:0px}

div#contents {width:75%; height:80%; display:inline; border:1px solid black;
padding:0px; margin:0px; overflow:scroll}

</style>


</head>


<body>

<div id="header">

<br />

<h1>The Header</h1>

</div>

<div id="left">

<br />

<a href="www.one.com">This is Link One</a> <br /><br />

<a href="www.two.com">This is Link Two</a> <br /><br />

<a href="www.three.com">This is Link Three</a> <br /><br />

<a href="www.four.com">This is Link Four</a> <br /><br />

<a href="www.five.com">This is Link Five</a> <br /><br />

<a href="www.six.com">This is Link Six</a> <br /><br />

<a href="www.seven.com">This is Link Seven</a> <br /><br />

<a href="www.eight.com">This is Link Eight</a> <br /><br />

<a href="www.nine.com">This is Link Nine</a> <br /><br />

<a href="www.ten.com">This is Link Ten</a> <br /><br />

</div>

<div id="contents">

</div>


</body>


</html>


If you tried it, you should see the main portion with scroll bars; this is what we want. However, the scroll bar of the browser is still there, and the presence of the browser’s scroll bar defeats the purpose of the scroll bar on our Main portion.

So which HTML element produces the scroll bar for the browser window? The BODY element! I  took off the scroll-bars for the BODY element by adding the CSS property “overflow: hidden,” to the BODY element. I tried the code again. The window's scroll bars were gone; that is what we want. However, I noticed some background space beyond the edges of my setup (the three portions put together).

Why was there extra space? Any block level element comes with padding area, which is background space between the element’s content and its borders. Any block level element also comes with borders. Finally, any block level element features a margin, which is the space between the borders and the edges of the element. If you do not give dimensions to the padding, border, and margin areas of an element, the browser does that for you.

Does the BODY element have these components? Yes! They have to be taken off so that the edges of my setup will align with the edges of the window's client area.


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 4 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials