Removing Scrollbars

In this lesson, we'll be making a framed page that looks like this. (Keep the sample page open as you read this tutorial.) You can see that there is no scrollbar or border between the left and right frames. The page appears seamless.

When the right frame is scrolled down, the left frame does not scroll with it. This is the big advantage of frames. Your links can stay onscreen as the content is scrolled. Removing the scrollbars and borders creates the "seamless" effect presented here.

This seamlessness is enhanced if both of the pages in the frameset have the same background color and appear as one page. The links would appear to "float" as the content frame is scrolled.

To create this effect we need to begin with a basic frameset and some test pages to load in it:

<frameset cols="150,*">

<frame src="test5.htm" name="links">
<frame src="test3.htm" name="main">

</frameset>

This is a simple two column frameset that loads "test5.htm" in the left frame named "links". The frame on the right is named "main" and displays the "test3.htm" page. Click the link on the blue page to load new links and you'll notice a scrollbar appearing in the left frame. Lets remove all of the scrollbars.

<frameset cols="150,*">

<frame src="test5.htm" name="links" scrolling="no">
<frame src="test3.htm" name="main" scrolling="no">

</frameset>

This would remove the scrollbars in both frames. Removing scrollbars is done by using the SCROLLING attribute in each <frame> tag. To turn the scrolling back on for the right frame, just remove the "scrolling='no'" attribute and the scrollbar for the right frame will reappear.

SCROLLING can be set to "yes", "no", and "auto". The "auto" value is the default and presents scrollbars only as needed. The other values work independently of the size of the page loaded. The "yes" value will display scrollbars whether they are needed or not, and the "no" value will always remove them.

You can see that caution is needed when removing scrollbars. You must make sure that the content in the effected frame will fit into the frame without the need for scrolling -- even in larger video resolutions. Otherwise, some content could not be accessed.

As a rule, when making a seamless frameset, one row or column has absolutely sized content, like styled links, that will display completely without scrolling. The frame containing content is placed to the far right and is allowed to scroll.

So, remember to turn off scrollbars by using the SCROLLING attribute in the individual <frame> tags. Make sure the content in these frames won't require scrolling at low resolutions.

Sizing & Coloring Borders

Once the scrollbars are removed, you're half-way to a seamless framed page. You still have a border between the frames. Before removing this border, lets look at some things we can do with it.

First, we can size the width of the border with the BORDER and FRAMEBORDER attributes. The BORDER attribute sets the width of the border in Netscape. The FRAMEBORDER is required for Microsoft's Internet Explorer.

We use both together to get the same border in both browsers. You can use these attributes to set all borders by using them in the <frameset> tag.

<frameset cols="150,*" border=10 frameborder=10>

<frame src="test5.htm" name="links" scrolling="no">
<frame src="test3.htm" name="main">

</frameset>

The above code would make a 10 pixel border around all frames in both browsers. To set the borders for a single frame, just put these attributes in the <frame> tags of the frames you want to be bordered.

You can make different sized borders for different frames if you'd like. NOTE: Where two frames meet, both will have a border and the overall look there would be twice as wide as a single border.

We can also color these borders with the BORDERCOLOR attribute. This is done in each individual <frame> tag. To make the left frame's borders red:

<frameset cols="150,*" border=10 frameborder=10>

<frame src="test5.htm" name="links" scrolling="no" bordercolor="#ff0000">
<frame src="test3.htm" name="main">

</frameset>

Remember that "#ff0000" is hexadecimal code for red. The default color for borders is the color of the viewer's browser window.

Removing Borders

To make a seamless page, we need to remove the borders. Removing borders doesn't effect the scrollbars at all. That's done with the previously mentioned SCROLLING attribute.

We have to do two things to remove borders completely. First we must set BORDER and FRAMEBORDER to zero. Next, we need to make and set a FRAMESPACING attribute to zero.

<frameset cols="150,*" border=0 frameborder=0 framespacing=0>

<frame src="test5.htm" name="links" scrolling="no">
<frame src="test3.htm" name="main">

</frameset>

Setting BORDER and FRAMEBORDER to zero turns off the borders. The FRAMESPACING attribute is used only by IE to provide space between the frames without the use of a border. It must be set to zero for a seamless look.

The above code will make a seamless page in both browsers. Remember that BORDER is used by Netscape, and FRAMEBORDER and FRAMESPACING is used by IE. You can turn off individual borders by placing the same code in the appropriate <frame> tag.

If you turn off borders, but not scrollbars, the scrollbars will appear as coded ("yes" or "auto"). If "auto" is used, no border will appear when the scrollbar goes away.

Resizing

Frames can be resized by the viewer by dragging a frame's border. This comes in handy if your frame's content is too wide at lower resolutions. The viewer can just drag the border to make the frame wider. You can drag frame rows to be taller or shorter the same way.

If you don't have any borders, the frame cannot be resized because there is no border to drag. Even if you do have a border, you can prevent the resizing of your frames by putting the NORESIZE attribute in the <frame>s you don't want resized:

<frameset cols="150,*" border=5 frameborder=5 framespacing=5>

<frame src="test5.htm" name="links" scrolling="no" noresize>
<frame src="test3.htm" name="main">

</frameset>

Notice that the above frameset has a border of 5 pixels. The left frame can not be dragged wider because of the NORESIZE attribute in it's <frame> tag.

Remember that if you don't have any borders, you don't need to use NORESIZE because your frames don't have any borders to drag and can't be resized anyway.

Care should be used to make sure your content fits in the frame and is fully visible at lower resolutions before you turn off your borders or use NORESIZE. You don't want anyone to miss some important content like your links.

Margins

In our current example the text content is not right at the edge of the frame as in our previous examples. This is because I made margins in the frames.

The nice part about using margins in a frame is that the margins will apply to all of the pages loaded into the frame. You don't have to code margins or padding in each content page.

Horizontal margins are set with MARGINWIDTH and vertical space is provided by MARGINHEIGHT:

<frameset cols="150,*" border=0 frameborder=0 framespacing=0>

<frame src="test5.htm" name="links" scrolling="no" marginwidth=50 marginheight=20>
<frame src="test3.htm" name="main" marginwidth=50 marginheight=20>

</frameset>

The above code provides each frame with a top and bottom margin of 20 pixels. The left and right margins are 50 pixels. These will apply to every page loaded into the frames even though there are no margins coded on the "test pages" themselves.

It's also important to note that the background isn't changed. There is no "blank" space occupying these margins. The loaded page's background fills in the margin space. Neat, huh?

Summary & Exercises

You can remove scrollbars in a frame by using "scrolling='no'" in the <frame> tags. You can also use "yes" and "auto". The "auto" value is the default.

You can remove borders by setting BORDER, FRAMEBORDER, and FRAMESPACING to zero in the <frameset> tag.

You can size borders by using using numerical values for BORDER and FRAMEBORDER in either the <frameset> tag (for universal sizing) or individual <frame> tags.

You can color borders by using BORDERCOLOR in the individual <frame> tags. You can color each frames' borders differently if you want.

By default, frames with borders can be resized. You can disable resizing by turning off the borders or using the NORESIZE attribute in the appropriate <frame> tag.

You can make margins in your frames by using MARGINWIDTH and MARGINHEIGHT. These margins will be applied to all content pages loaded into the frame.

Great care should be taken when styling frames. You want to make sure that the frame's content properly fits at low resolutions before removing scrollbars and borders. Remember that margins are added to any margins or padding coded on the content page. Preview your work at different resolutions. Preview, preview, preview.

To practice your frames styling, make this seamless page.

To Next Advanced HTML Lesson

Back To Advanced HTML Index