Introduction
The #1 web design question I get is "How do you do those scrolling boxes?".
Well, this tutorial should cover everything I can think of on the subject of
scrolling boxes.
What It Is
This is what content in a scrolling box looks like:
Scrolling Box Sample
Some people like to put news in scrolling boxes...
The News
Today I updated the archives
4-15-2002
More News
Today I made a new entry in the graphics section.
4-12-2002
Updates!
5 new layouts!
4-10-2002
etc. & etc. & etc. & etc. & etc. & etc. & etc. &
etc. & etc. & etc. & etc. & etc. & etc. & etc. &
etc. & etc. & etc. & etc. & etc. & etc. & etc. &
etc. & etc. & etc. & etc. & etc. & etc. & etc. &
etc. & etc. & etc. & etc. & etc. & etc. & etc. &
etc. & etc. & etc. & etc. & etc. & etc. & etc. &
etc. & etc. & etc. & etc. & etc. & etc. & etc. &
etc. & etc. & etc. & etc. & etc. & etc. & etc. &
etc. & etc. & etc. & etc. & etc. & etc. & etc. &
etc. & etc. & etc. & etc. & etc. & etc. & etc. &
etc. & etc. & etc. & etc. & etc. & etc. & etc. &
etc. & etc. & etc. & etc. & etc. & etc. & etc. &
The Code: Simplified
Putting your content in a scrolling box doesn't require five miles of code,
as a matter of fact, it can be simplified to this:
<div style="overflow: auto; height: 200px; width: 150px">
CONTENT AND HTML GOES HERE
</div>
All you need to do is adjust the height and width to whatever measurement you want it to be in pixels!
Font, BackGround, and Border Controls
Fonts
If, for some reason, the font inside your scrolling box doesn't show up how
you want it, use this:
<div style="overflow: auto; height: 200px; width: 150px; font-family: Arial; font-size: 13px; color: #990000">
CONTENT AND HTML GOES HERE
</div>
Just Change the font-face, size, and color to what you want.
BackGround Color
To make a special background color appear, use this:
<div style="overflow: auto; height: 200px; width: 150px; font-family: Arial; font-size: 13px; color: #990000; background-color: #CCCCCC">
CONTENT AND HTML GOES HERE
</div>
BackGround Image
If you prefer an image...
<div style="overflow: auto; height: 200px; width: 150px; background-image: url(HTTP://IMAGE_ADDRESS?)">
CONTENT AND HTML GOES HERE
</div>
The code above will make your image tile over and over, but if you don't want that, here are some more controls:
<div style="overflow: auto; height: 200px; width: 150px; background-image: url(HTTP://IMAGE_ADDRESS?); background-attachment: fixed; background-repeat: no-repeat; background-position: left top">
CONTENT AND HTML GOES HERE
</div>
Border
To put a border around the box, use this:
<div style="overflow: auto; height: 200px; width: 150px; border: #000000; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px">
CONTENT AND HTML GOES HERE
</div>
Scrollbar Controls
For a unique colored scrollbar on the box, use this code:
<div style="overflow: auto; height: 200px; width: 150px; scrollbar-base-color: #990000">
CONTENT AND HTML GOES HERE
</div>
If you prefer more control over the look of the scrollbar, use this:
<div style="overflow: auto; height: 200px; width: 150px; scrollbar-face-color: #000000; scrollbar-highlight-color: #000000; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000">
CONTENT AND HTML GOES HERE
</div>
IFrames
IFrames are kind of like scrolling boxes, but kind of not. First, theres no
need for CSS to make an IFrame. An IFrame is a box on your web page, that has
another web page inside of it! So that means you'll have two web pages at once!
The simple code for IFrames is this:
<iframe src="HTTP://PAGE_ADDRESS?" width="200" height="300">Sorry, this page uses IFrames!</iframe>
That will make a basic IFrame. The part that says "Sorry, this page uses IFrames!" will only display if the viewer is looking at your website with a browser that doesn't support IFrames, like Netscape. For more complex controls, here are some more elements:
frameborder="0" (Default is 1)
marginheight="0" (Default is 14 on windows, and 8 on macintosh)
marginwidth="0" (Default is 14 on windows, and 8 on macintosh)
name="blahblah" (you need to use the name attribute, so if
you want something to open up in that iframe when someone clicks a link you
can set the target to the name of the iframe. example, if you want a link to
open in an iframe called "navi", use this: <a href="file.html"
target="navi">Text</a>)
scrolling="yes" (default is auto. choices are auto, no, and
yes)
Here are a few of those elements being used:
<iframe src="http://www.google.com" width="300" height="100" frameborder="5" name="goowindow" scrolling="no">This page uses IFrames</iframe>
The most important aspect of IFrames, is that they only work on Internet Explorer 3+!!
Applied Inline Scrolls
Here is what we are going
to make.
You may want to understand tables before going on.
What you saw was one big image chopped up into 9 little images, and placed in a table, like so.
You can view the source code by going to View > Source, on any of those above links, but let's analyze part of the code here:
<table height="500" width="500" border="0" cellspacing="0" cellpadding="0" align="center">
<tr valign="top">
<td height="250" width="250"><img src="images/001.jpg" width="250" height="250"></td>
<td height="250" width="230" valign="top"><img src="images/002.jpg" width="230" height="250"></td>
<td height="250" width="20"><img src="images/003.jpg" width="20" height="250"></td>
</tr>
<tr valign="top">
<td height="230" width="250"><img src="images/004.jpg" width="250" height="230"></td>
<td height="230" width="230" background="images/005.jpg">
<div style="overflow: auto; width: 230px; height: 230px; scrollbar-base-color: #990000">
blah blah blah.........
</div>
</td>
<td height="230" width="20"><img src="images/006.jpg" width="20" height="230"></td>
</tr>
<tr valign="top">
<td height="20" width="250"><img src="images/007.jpg" width="250" height="20"></td>
<td height="20" width="230"><img src="images/008.jpg" width="230" height="20"></td>
<td height="20" width="20"><img src="images/009.jpg" width="20" height="20"></td>
</tr>
</table>
This is a very simple table. The important part is the scrolling box in the 5th <td>. I've set the the inline scroll to be the same size of the table section, 230 x 230px. I also needed the faded image behind the text, so in the <td> tag, I set the background to "images/005.jpg", because my faded graphic is located in a folder called images, and the name of the graphic I want is "005.jpg". If I wanted the faded graphic in the background to be an image located on another server, like on my old homestead account I'd make the address like this instead: <td height="230" width="230" background"http://greenkitti.homestead.com/files/005.jpg">