This is a demonstration page to show you how a top border background graphic can remain at the top as your visitor scrolls down

Using a Top Border Background for a Frame Page

This is a demonstration page to show you how a top border background graphic can remain at the top as your visitor scrolls down the page to view other content. On short pages the top border will always remain visible, but if you have more content "below the fold," the top border disappears. That may or may not be a good thing, but if you want the border to appear at all times use a two-frame page.

On my Resources page I list a web site that has a tool for creating the HTML for frames. You can use that or if you have an HTML or WYSIWYG editor that can create frames, like the Namo Web Editor I have, use that instead.

For those who don't understand what frames are, here's an explanation. Unlike a regular web page, a frame page consists of more than one page. Think of a framed page as a split window with each split having its own page and it will make more sense. In this demo there is a top frame and a bottom frame. Each frame has a page and can have different background graphics or colors. You can have different variations or quantity of frames, but in my opinion two or three frames are enough. The size of each frame is a variable that can be expressed as either the number of pixels or percentages.

Each frame can be scrollable. That is, each of the frame pages can have a scroll bar. A top frame or side frame does not have to have a scroll bar if there is no content to scroll to and in fact may confuse your visitors if it is present. Make a frame scrollable only with its intended use in mind.

A top frame or side frame can be used to hold the text navigation links or graphical navigation buttons. In this demo since I have a patterned top frame, I'm not using text navigation links because it may not be obvious to the visitor. However, if using some colored graphical buttons for the navigation, that may work with the pattern. Or there are some JavaScript or DHTML navigation scripts, even CSS code for navigation links, using color boxes that will work.

In this demo you'll notice that there is no visible border between the top frame and the bottom frame. To do the same, make sure your frameset code includes border="0" to make the frames seamless.

For this demo, the whole page is called topframedemo.html, the top frame page is called topframedemotop.html, and the bottom frame page is called topframedemobtm.html. The main page contains the HTML code that calls up the two pages that make up the framed page. You can view the page source to see how it works, but here is a sample for the main page you can use. Be sure to change everything in red type to what is appropriate for your web site:

<html>
<head>
<title>Your page title</title>
<meta name="description" content="your description">
<meta name="keywords" content="your keywords">
</head>

<p>You need a browser that supports frame to view this page.</p>

</body>
</noframes>
</frameset>
</html>

My top frame page simply has the <html>, <title>, <head> and <body> tags with the body tag defining the background graphic used. The bottom frame page has this content with white as the body color to match the top frame graphic which has a white background. Make sure that you name these pages the same as what you put under the src="x" in the frame name tags.

Also note that you can use a background tile for the same purpose for the top frame. With a tile the top frame can be as deep as you like, not bound by how tall the border graphic is because the graphic will tile across the entire page. Or you can use CSS to fix the tile across the top of the page. See the Mini Tiles on my Background Tiles page for the demonstration using CSS with the tiles.

For more detailed information about using frames, check out the HTML Goodies' Tutorial.

Please close this window to return to the Top Edges page