Log In Sign Up

Scrollbars and CSS Tutorial


Forum: Graphic and Web Design

Notices

Welcome to the JustMommies Message Boards.

We pride ourselves on having the friendliest and most welcoming forums for moms and moms to be! Please take a moment and register for free so you can be a part of our growing community of mothers. If you have any problems registering please drop an email to boards@justmommies.com.

Our community is moderated by our moderation team so you won't see spam or offensive messages posted on our forums. Each of our message boards is hosted by JustMommies hosts, whose names are listed at the top each board. We hope you find our message boards friendly, helpful, and fun to be on!

Reply Post New Topic
  Subscribe To Graphic and Web Design LinkBack Topic Tools Search this Topic Display Modes
  #1  
May 10th, 2009, 03:02 PM
CeiCei's Avatar Platinum Supermommy
Join Date: Jul 2005
Location: Mobile, Alabama
Posts: 9,482
Send a message via AIM to CeiCei Send a message via MSN to CeiCei Send a message via Yahoo to CeiCei
Introduction
I thought this would be a useful tutorial for you. Basically, I will show you how easy it is to create a website adding a automatic scrollbar within the page. This tutorial also includes how to add color to both the inpage scrollbar and your browser scrollbar. You are more than welcome to download the files and test them out by clicking on the below link. It includes all the examples mentioned in this tutorial along with the associated CSS files and this tutorial. (The file is in ZIP format)


Getting Started
So, what would the purpose to add a scrollbar within your webpage? Well, you might want to design a website that does not scroll down. However, you might have content that goes beyond the visiable area of the browser.


In the above example you see a very basic three column layout created using full CSS. This page has a browser scrollbar. For you to read the full page, you will need to scroll down.Normally you would have to limit your content so that it does not allow the scrollbars to be available (see the below example). Another option would be to create a flash website which allows you to add scrollbars.


Form Textarea Method
Another method that is simply a waste of your precious time (and putting together a sloppy design) is the “form textarea” method like in the example below.


Although it can be created by adjusting your CSS file (which I didn’t take the time out to do) this is really not a good option. Adding headers and images are simply out of the question. This is a form element normally used for visitors to add comments or information, so this tends to be limited when trying to add page content. However, I have seen many websites where the designer has used this method making the site look very amateurish and sloppy for their client. But just case you are interested here is how it was created.

Within the page code I added the following:

<form action="" method="get">
<textareaid="formtext"name="content" cols="75" rows="20">
Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here.

Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here.

Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here.
</textarea>
</form>

This alone makes the text within the textarea basic and very unappealing. To format the text I added the following to the CSS file.

#formtext {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}

Using CSS
With CSS, you can add a scrollbar within the page easily. To do this you would use the following for your CSS file:

#innerscrollbar {
width: 400px; /* The width size of the content area */
height: 290px; /* The height size of the content area */
overflow: auto; /* If you want the scrollbar to automatically show or not */
padding: 10px; /* The spacing around the content area */

}

You would simply use id=”innerscrollbar” within your pages <div> tag to make it apply.

<div id="innerscrollbar">
<p>Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here. </p>
</div>

The overflow: auto; element allows the scrollbar to only show when the content goes beyond the visiable page area. You can look at the following two examples to see how it works.

In this example the text does not go beyond the visiable area so the scrollbar does
not show.

In this example you see the same exact page, but there is more content for the page to require a scrollbar. Notice how I was able to format the subheader and add the image at the bottom. This cannot be accomplished with using the “Form Textarea” method I mentioned earlier.

That is all there is to it. It’s just that simple.

Adding Color to Scrollbars
A couple of years ago, when designers discovered this could be done it, was the popular thing to do. There are still designers who add color to scrollbars which is perfectly fine. To be honest, the only downfall to this CSS trick is that it can only be seen in Internet Explorer. Firefox and other browsers do not have the “programming” to allow this CSS element.

So, how do you add color? It’s very simple to do. To begin it is best that I introduce you to the CSS elements using a diagram.

  • scrollbar-track-color: #000000; /* Sets the color for scrollbar track */
  • scrollbar-face-color: #086CA2; /* Sets the color for the scrollbar slider */
  • scrollbar-arrow-color: #ffffff; /* Sets the scrollbar arrow color */
  • scrollbar-3dlight-color: #0082C8; /* Sets the scrollbar 3D light color */
  • scrollbar-highlight-color: #B9D1EA; /* Sets the scrollbar highlight color */
  • scrollbar-shadow-color: #B9D1EA; /* Sets the scrollbar shadow color */
  • scrollbar-darkshadow-color: #7D9FC3;/* Sets the scrollbar dark shadow color */



Now, how do you add these elements to your css file? Simple, just adding the following:

html {
scrollbar-track-color: #086CA2;
scrollbar-face-color: #086CA2;
scrollbar-arrow-color: #ffffff;
scrollbar-3dlight-color: #0082C8;
scrollbar-highlight-color: #B9D1EA;
scrollbar-shadow-color: #B9D1EA;
scrollbar-darkshadow-color: #7D9FC3;

}

html let’s the browser know that you are changing the color for the webpage.

What about changing the colors for both the inpage scrollbar and the browser? Simply add the scrollbar elements to #innerscrollbar as follows along with the html element:

#innerscrollbar {
width: 400px;
height: 290px;
overflow: auto;
padding: 10px;
scrollbar-track-color: #086CA2;
scrollbar-face-color: #086CA2;
scrollbar-arrow-color: #ffffff;
scrollbar-3dlight-color: #0082C8;
scrollbar-highlight-color: #B9D1EA;
scrollbar-shadow-color: #B9D1EA;
scrollbar-darkshadow-color: #7D9FC3;


}

Below is an example, but remember it can only be viewed in Internet Explorer.


That is all I have for you now. Good Luck!
__________________
Kassia's Blog | Kassia's Family Blog | In My Purple Passion | The Food Travel Enthusiast




My Three Princes: Cordell (23 y/o), Ernest (5 y/o), Robert (4 y/o)

Reply With Quote
  #2  
May 11th, 2009, 07:53 AM
Kilikina's Avatar Mega Super Mommy
Join Date: Sep 2005
Location: Calgary, Alberta, Canada
Posts: 1,700
Send a message via MSN to Kilikina
wow very detailed - thank you!
__________________

"Splish splash I was taking a bath!"

I design custom photo cards and websites. For more
information please check my 2 websites:
http://www.designsbykristina.ca
http://www.q1media.net
or send me an email: kduverna@q1business.net




Reply With Quote
  #3  
May 11th, 2009, 06:46 PM
CeiCei's Avatar Platinum Supermommy
Join Date: Jul 2005
Location: Mobile, Alabama
Posts: 9,482
Send a message via AIM to CeiCei Send a message via MSN to CeiCei Send a message via Yahoo to CeiCei
Thanks. I am not good at explaining how to do this stuff but I tried...That took a lot of work to put together....Hope you found it helpful.
__________________
Kassia's Blog | Kassia's Family Blog | In My Purple Passion | The Food Travel Enthusiast




My Three Princes: Cordell (23 y/o), Ernest (5 y/o), Robert (4 y/o)

Reply With Quote
Reply

Topic Tools Search this Topic
Search this Topic:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off



All times are GMT -7. The time now is 11:33 AM.



Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Search Engine Optimization by vBSEO 3.6.0