SEO Scrolling Frames Problem Solved - Final Phase
(Page 4 of 4 )
After giving the BODY element the property “overflow: hidden,” I took off the padding, border, and margin components from the BODY element by adding the following CSS code to the BODY element:
border:none; padding:0px; margin:0px
I tested the resulting code. It worked! This is the final code:
<html>
<!-- Banner and Contents -->
<head>
<style type="text/css">
h1 {text-align:center}
body {background-color:Aqua; overflow:hidden; border:none; padding:0px;
margin:0px}
div#header {width:100%; height:20%; border:1px solid black; padding:0px;
margin:0px}
div#sidebar {width:25%; height:80%; display:inline; border:1px solid black;
padding:15px; margin:0px}
div#main {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="sidebar">
<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="main">
element element element <br /> element element element <br /> element element element <br />
element element element <br /> element element element <br /> element element element <br />
element element element <br /> element element element <br /> element element element <br />
element element element <br /> element element element <br /> element element element <br />
element element element <br /> element element element <br /> element element element <br />
element element element <br /> element element element <br /> element element element <br />
element element element <br /> element element element <br /> element element element <br />
element element element <br /> element element element <br /> element element element <br />
element element element <br /> element element element <br /> element element element <br />
element element element <br /> element element element <br /> element element element <br />
element element element <br /> element element element <br /> element element element <br />
element element element <br /> element element element <br /> element element element <br />
element element element <br /> element element element <br /> element element element <br />
</div>
</body>
</html>
Conclusion
There are two purposes for having frames. One is to keep information on a portion of the web page fixed, while another portion is scrolled. The other is to keep information on a portion of the web page fixed, while another portion is replaced via clicking on a link. Web pages with frames are not spiderable. If your reason for having frames is the first one, and you want your web page to be spiderable, then you can have a web page that behaves like a frame-set by doing this things:
Take off the padding, border, and margin components of the BODY element.
Take off the scroll-bars of the BODY element using the overflow CSS property.
Use DIV elements instead of frames for the different portions of your web page.
If you want DIV elements horizontally, side-by-side, then convert them to inline elements using the display CSS property.
Give the DIV elements % (not pixels) values for their widths and heights.
Use the overflow CSS property to make any of the DIV elements scrollable.
GOOD LUCK.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
