Standard I-frame
You have no-doubt heard that using iframes is not very good for getting your on-page content fully indexed by search engine spiders. What a shame – they are fairly handy to have as they allow your to constrain a lot of visible content such as pictures and text, within a small and controllable area.
You will be glad to hear that there is a reliable CSS method for producing something very similar to an iframe, but without the problems associated with search engine indexing.
It is such a simple solution, you will be wondering why it isn’t used more…beats me!
CSS Scroller
Paste the following into the head section of your page’s HTML:
<style type=”text/css” media=”screen”>
.scroll {
width: 100px;
height: 50px;
overflow: auto
}
</style>
Now, in the body section where you want your scroller to appear paste the following HTML:
Fig.1 Simple CSS Scrollable Area
<div class=”scroll”>
This is my CSS scrollable area
<br><br><br><br>
It should work nicely!
</div>
The effect is instant – but a little boring! (see fig.1). Let’s liven things up a little with CSS. Copy and paste the following CSS, replacing the CSS in your head section.
<style type=”text/css” media=”screen”>
.scroll {
float:right;
background-color: #f0f0f0;
padding: 8px;
width: 100px;
height: 50px;
overflow: auto;
border: solid 1px #ccc
}
</style>
It couldn’t be simpler!
