Web Design

[richm8026]

I am trying to write a website and always found teh vertical scrollbars on the left intriguing but I can't seem to figure out how to get those, what they do is, they scroll the text inside of it instead of the whole page, anybody have any ideas on how I would do that?

 

[exemption]

<STYLE type="text/css">
<!--
BODY
{
scrollbar-face-color: #800000;
scrollbar-highlight-color: #CDC9C9;
scrollbar-3dlight-color: #CDB7B5;
scrollbar-darkshadow-color: #FFCCCC;
scrollbar-shadow-color: #FF4500;
scrollbar-arrow-color: #C76114;
scrollbar-track-color: #E38217 ;
}
-->
</STYLE>

Thats the code for the scroll bar..
Use the gif file attached to see what is what..

 

[Zenax]

exemption has showed you how to style the scroll bars, where I will now show you how to create the scrollbar themselves!

The first thing that you need to do is to create a page that is going to hold all the text that you want to scroll through. For examples sake lets name it page1.html

You now need to insert something called an iFrame. These are known as floating frames.

Basically, all you need to insert into your webpage is the following piece of code:

<iframe name="iframe" src="page1.html" width="300px" height="300px"></iframe>

You can also load other pages from within the page by adding:

<a href="http://forums.x10hosting.com/graphics-webdesign/page2.html" target="iframe">click here to load page 2</a>

Notice the target part of the link code. That tells the web page to direct the page into the iframe, which we named iframe!

 

[hexusff]

Personally I don't like iframes, another way to get those scrollbars are just divs with some styling.

<style type="text/css">
.DivWithScrollbar
{
	height:50px;
	background-color:#DFF;
	overflow:auto;
}
</style>
<div class="DivWithScrollbar">
this is the div content<br />
this is the div content<br />
this is the div content<br />
this is the div content<br />
this is the div content<br />
</div>