Box with scroll only using CSS

Guest · **Points:**

Ok, so I will try to do My first of all tutorial.

It?s about doing a box with scroll, only using CSS, lets start. I will begin by puting the whole code of the single page and then try to explain each bit of the code. I assume that you know a bit of CSS...

Code:

<html>
<head>
<title>Box In CSS</title>
<style>
div#box {
   width: 100px;
   height: 100px;
   background-color: #000;
   color: #FFF;
   overflow: auto;
   /* Scroll bar code */
   scrollbar-arrow-color:#FF0;
   scrollbar-base-color:#00F;
   scrollbar-darkshadow-color:#0F0;
   scrollbar-face-color:#F00;
   scrollbar-highlight-color:#0FF;
   scrollbar-shadow-color:#F0F;
}
</style>
</head>

<body>

<div id='box'>
This is were the box is, it will wrap and everything will look alrugbt when you use it, I know its annoying tha you have to scroll and all of that but if you want to write a big text, you don't want your site to strech or be out of line do ya?
</div>


</body>
</html>

So, this is the big code that you can put in a file and start seeing how things work, now I will explain what changed it

Code:

<div id='box'>
This is were the box is, it will wrap and everything will look alrugbt when you use it, I know its annoying tha you have to scroll and all of that but if you want to write a big text, you don't want your site to strech or be out of line do ya?
</div>

Now, This div is the box itself that will be modified with the css.

Code:

   width: 100px;
   height: 100px;
   background-color: #000;
   color: #FFF;

These are the CSS properties that determine The Width, Heigth, background color and color of the box:

The Color is to change the color of the letters, the rest I think you get it

.

Code:

overflow: auto;

Now, this is the most important property of the css, is the one that says that that div is a scroll-box. Try not to forget it.

Code:

   scrollbar-arrow-color:#fff; 
   scrollbar-base-color:#000; 
   scrollbar-darkshadow-color:#000; 
   scrollbar-face-color:#000; 
   scrollbar-highlight-color:#000; 
   scrollbar-shadow-color:#000;

These are the colors that you can change of the scroll thats why I made the scroll with that horribel colors, to give you an ideia of were do you change each of the colors, try doing some experiences to know what each of the proporties changes what part of the scroll colors.

OK, This is the end I hope you liked my first tutorial, I learned this from a tutorial, but I forgot were it was....

Guest · **Points:**

Wow, that was fast!

Good tutorial, it important that people learn how to save space! :wink:

I have a couple of things to add:

For those of you using the Firefox browser (like me) you will not see a different color scrollbar. Relax - there is nothing wrong. The code:

Code:

   
   /* Scroll bar code */
   scrollbar-arrow-color:#FF0;
   scrollbar-base-color:#00F;
   scrollbar-darkshadow-color:#0F0;
   scrollbar-face-color:#F00;
   scrollbar-highlight-color:#0FF;
   scrollbar-shadow-color:#F0F;

Only works on MS Internet Explorer.

Also, you don't need to type:

Code:

div#box {

that is just extra code.

you can just type:

Code:

#box {

The difference is that by typing "div#box" you are telling the computer that any "div" item named "box" should have those settings.

While, "#box" tells the computer that any item (div or not) named "box" should have those properties.

Guest · **Points:**

Woow nice, I didnd't knew that you were good at css too, I didn't knew that with Internet Explorer thank you for give the code.

I was going to say that but I forgot. About the extra code Yes, before I didn't used that extra div with the #, but it helps me remember fast that it is a div.

Guest · **Points:**

That's nice! I use scroll boxes in my layouts alot, but I had never tried to style the scrollbar itself. Thanks for the tips!

Guest · **Points:**

Woow my first tutorial have got more than 150 views that's great ain't it?

Box with scroll only using CSS

Who is online