Inline Scrolls & IFrames

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:

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>

1. Put the addess of the image where it says "HTTP://IMAGE_ADDRESS?"
2. You can set "background-attachment: fixed" to either "fixed", or "scroll". If you set it "fixed", the the image will not scroll, even if your content does, and if you set it to "scroll", the the image will scroll along with your content, as normal.
3. You can set "bacground-repeat: no-repeat" to either "no-repeat", "repeat", "repeat-x", or "repeat-y". "no-repeat" will make the image display in the background only once, not tile. "repeat" makes the image tile as usual. "repeat-x" or "repeat-y" makes the image tile only on the horizontal (x) or vertical (y) axis.
4. background-position: left top: "Left" means that the image is pressed all the way to the left, and "top" means that the image is press all the way to the top, like default. You can set the first part (left) to either "left", "center", "right", or a value like 150px. You can set the second part (top) to "top", "center", "bottom", or a value.

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>

1. Set #000000 to the color that you want the border to be.
2. Set solid to the style you want the border to have. Your choices are: dotted, dashed, solid, double, groove, ridge, inset, and outset.

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">

Main?