MaraHTML

¤ Tisha Look's HTML Tutorial ¤

How To Make Scrollbars

Scrollbars are an excellent way to keep your site from becoming overloaded with text. They're also good for clubs where you want to keep certain text separated. For an example of scrollbars in action, please feel free to visit my club.

The <DIV> Tag:
The <DIV> tag is where you create scrolling boxes. The most basic <DIV> tag with a scrollbar looks like this:

<DIV STYLE="width:100px; height:100px; overflow:auto;">
Put your text here.
</DIV>

Just replace the WIDTH and HEIGHT with the sizes you want it to be (in pixels).

Adding Variables To Scrollbars:
There are a lot of different things you can specify in your <DIV> tag besides the width and height. Here's a list of other variables you can add (Please Note: these are all optional unless otherwise noted):

position: absolute; - This MUST be added in order for the TOP and LEFT variables to work.
top: 100px; - This tells the browser to position your box 100 pixels from the top of the screen.
left: 100px; - This tells the browser to position your box 100 pixels from the left of the screen.
width: 100px: - This tells the browser to make the box 100 pixels wide.
height: 100px; - This tells the browser to make the box 100 pixels high.
overflow: auto; - This tells the browser to add a scrollbar to your box. You MUST use this variable in order for the scrollbar to work.
border: 1px solid #000000; - This tells the browser to add a border to your box that is 1 pixel wide, solid and black.
background-color: #FFFFFF; This tells the browser to make the background color of your box white.
color: #FF0000; - This tells the browser to make the font color in your box red.

Colored Scrollbars:
Now let's say you want your scrollbars to be a certain color. First of all, please be aware that colored scrollbars will not show up in Firefox or Netscape. Also, just like the previous variables, all of these are optional. That said, here is a list of variables you can add to your <DIV> tag:

scrollbar-base-color: #FF0000; - This tells the browser to make the base color of your scrollbar red.
scrollbar-arrow-color: #000000; - This tells the browser to make the arrow color of your scrollbar black.
scrollbar-3dlight-color: #FFFFFF; - This tells the browser to make the 3dlight color of your scrollbar white.
scrollbar-darkshadow-color: #000000; - This tells the browser to make the darkshadow color of your scrollbar black.
scrollbar-face-color: #FF0000; - This tells the browser to make the face color of your scrollbar red.
scrollbar-highlight-color: #FFFFFF; - This tells the browser to make the highlight color of your scrollbar white.
scrollbar-shadow-color: #000000; - This tells the browser to make the shadow color of your scrollbar black.
scrollbar-track-color: #cccccc; - This tells the browser to make the track color of your scrollbar gray.

Putting It All Together:
Let's say you want a scrollbar box that's 500 pixels wide, 200 pixels high with a black border, a white background and red text. You also want it to be 100 pixels from the left of the screen. Here's the code you would use to create that box:

<DIV STYLE="POSITION: ABSOLUTE;
WIDTH: 500PX;
HEIGHT: 200PX;
BORDER: 1PX SOLID #000000;
BACKGROUND-COLOR: #FFFFFF;
COLOR: #FF0000;
LEFT: 100PX;
OVERFLOW: AUTO;">
Put your text here
</DIV>

Scrollbars In Club Layouts:
If you plan on putting scrollbars in your club, you'll need to make an adjustment to the code above. In order for the scrollbar code to work properly, you'll have to take out the spaces in the STYLE of the <DIV> tag as follows:

<DIV STYLE="WIDTH:100PX;HEIGHT:100PX;OVERFLOW:AUTO;">

You'll also need to remove any POSITION variables as they won't show up properly in club layouts. Your best bet is to put your <DIV> tags inside table <TD> tags.

One Final Note:
Please remember that this is advanced HTML and it may take some practice to get it just right. Also, be aware that your scrollbar WILL NOT SHOW UP until your text is longer than the box height. =)

¤ NAVIGATION ¤

¤ Home

¤ HTML Tutorial:

Intro

Adding Graphics

Working With Text

Working With Colors

Adding Links

Creating Tables

Adding Music

Marquees

Scrollbars