Frameset Attributes

If you've viewed any of the examples I've given so far, you'll know they're a little... messy.

"Frames don't normally look that clunky!" I hear you cry! And they don't. By adding attributes to the FRAMSET and FRAME tags, you can dramatically change the look of your frames pages.

Frame Resizing

We'll start with a simple one. Notice on the previous examples (click here to refresh your memory) that the frames can be resized if you drag them with the mouse. You probably don't want your visitors to be able to do this, so to prevent it happening add NORESIZE to your FRAME tags.

Here's the modified code (we'll work with a simple two frame horizontal split for these examples):

<FRAMESET ROWS="100,*">

<FRAME NAME="navbar" SRC="navbar.html" NORESIZE>
<FRAME NAME="main" SRC="main.html" NORESIZE>

</FRAMESET>

Click here to view the result.

To Scroll or Not to Scroll

You can decide whether or not to put scrollbars in each of your frames using the SCOLLING attribute of the FRAME tag. Under most circumstances you should set this to AUTO, which means that the scrollbars will only appear if they are needed. However, you can also set this attribute to YES or NO depending on what you want it to do.

When choosing which setting to use, always remember that not everyone will be viewing at the same resolution as you. On your screen with your settings you may not need scrollbars, but someone else may. That's why AUTO is generally the best option.

Frame Borders

At the moment our framesets all seem to have borders on them. You'd think they'd be quite simple to get rid of really, but HTML doesn't work like that. There are in fact 5 spearate attributes concerning frame borders, and to be safe I advise that you use all of them. Different browsers look for and respond to different code, so you'll just have to put up with it for now.

Let's imagine that you want to get rid of all borders, which is a fairly common desire. If you do want some kind of border then simply adjust the attribute values as necessary.

First of all, in the FRAMESET tag (or tags if you're nesting them), add the two attributes BORDER and FRAMEBORDER. BORDER takes a number value, specifying how thick the border should be while FRAMEBORDER just needs a simple yes or no.

<FRAMESET ROWS="100,*" BORDER="0" FRAMEBORDER="NO">

Next in your FRAME tags add the FRAMEBORDER attribute, As before, this just requires a yes or no:

<FRAME NAME="navbar" SRC="navbar.html" NORESIZE SCROLLING="AUTO" FRAMEBORDER="NO">

That should have eradicated all traces of a frame border. Have a look if you don't believe me.

Border Colours

You may have noticed that I said there were 5 attributes relating to frame borders. In case you're worried, yes I can count perfectly well. The other two only come into play when you ARE using borders.

They're both used to control the colour of your borders. The attribute is called BORDERCOLOR, it goes in both the FRAMSET and FRAME tags, and it takes a normal hex colour code. Here's an example:

<FRAMESET ROWS="100,*" BORDER="5" FRAMEBORDER="YES" BORDERCOLOR="#0000FF">

<FRAME NAME="navbar" SRC="navbar.html" NORESIZE SCROLLING="AUTO" FRAMEBORDER="YES" BORDERCOLOR="#0000FF">
<FRAME NAME="main" SRC="main.html" NORESIZE SCROLLING="AUTO" FRAMEBORDER="YES" BORDERCOLOR="#0000FF">

</FRAMESET>

Click here to view. Note that for some strange reason, some browsers don't respond to the BORDERCOLOR attrbute until the BORDER attribute has been set to 5 or higher. Weird.

Margins

The final set of attributes we'll look at relate to frame margins. Use these attributes in the FRAME tag and they'll alter the margins in the frame.

The two attributes are MARGINWIDTH and MARGINHEIGHT - WIDTH deals with horizontal margins and HEIGHT with the vertical ones. They both take number values from 0 upwards. For example:

<FRAMESET ROWS="100,*" BORDER="5" FRAMEBORDER="YES" BORDERCOLOR="#0000FF">

<FRAME NAME="navbar" SRC="navbar.html" NORESIZE SCROLLING="AUTO" FRAMEBORDER="YES" BORDERCOLOR="#FF0000" MARGINWIDTH="30" MARGINHEIGHT="30">
<FRAME NAME="main" SRC="main.html" NORESIZE SCROLLING="AUTO" FRAMEBORDER="YES" BORDERCOLOR="#FF0000" MARGINWIDTH="30" MARGINHEIGHT="30">

</FRAMESET>

The result looks like this. You'd probably never want a margin this big, but I wanted to make it obvious!

And that just about covers everything you should need to know about frames. Always think carefully when you're using them because they can cause serious problems, but hopefully things will work out fine. And if they don't, then just don't tell anyone where you learnt to use them!