Seamless Frames

Use these to jump around or read it all...

[How Is It Done?] [The Main Frame Command] [The Frame Sources]

This is a tutorial that should have been done a long time ago. People have been writing and asking me how this is done for a while now. These seamless frames give a great look to the page. Plus they also make a great sideline background, left or right. Just add color to either of the frame-window pages.

How Is It Done?

You do it through frame commands as you could most likely glean from the title of the tutorial. You should make a point first reading and understanding the frame tutorial. I will not go into more than creating this effect. I am assuming you have some frame knowledge going in.
The only difference between this frame tutorial and the other is that you'll add a few commands to hide the frame borders.

The Main Frame Command

It looks like this:

<FRAMESET COLS="15%,*" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">

Notice I have done little more than added a new command, FRAMEBORDER, and set it to zero. It goes the other way too. If you want, you can set the command to 50 to get really, really wide borders. But here we want seamless frames.

The seamless effect is shown because I have set the background color of the two source pages to white [FFFFFF]. If I were to set the colors differently, then the effect would be more of a sideline background because then the seam would be visible. If you haven't already, click on the sideline example link on the left to see what I mean.

One other new thing, see the COLS="15%,*" in there? That star is a nice way to speed up your math skills. Whatever number you put in the first position, add the star in the second and it does the 100% math for you. You can also use it for a right frame just by flipping it around like so: COLS="*,15%".

I have seen a great use of this format where the colors appear to go from light to dark into the frame. See it at The Van Halen News Desk. I liked it when Dave was the lead singer. Moving along...

The Frame Sources

They look like this:

The frame sources are that same as you have used in the past. Each is given a target name so that the links in the left side targets the information to the larger right window. Again, see the frame tutorial for gobs on how to target frame HREF links. But just as a quick refresher, the format for targeting a link in this frame set up would be:

<A HREF="mainpage.html" TARGET="main">Click Here</A>

I have set the MARGINHEIGHT and MARGINWIDTH to my liking. You can play with the sizes to get the text closer or further from the actual seam. Any centering of text is done on the source page itself using the <CENTER> and </CENTER> commands.

Notice also that a SCROLLING="no" command was added to the left side frame to eliminate the scroll bar should you run into a page that has its screen settings lower than you had hoped. That would kill the entire effect.

I have also included a test link on the left to show that you can bring in outside pages using this format. If the outside page has the same background then the effect stays. If not, then the effect dies.

That should do it. The effect can be compounded by just adding more frames to the mix. You could create many seamless connections. The problem comes when you shift the pages or link to a new page (try a link on the left for the effect). That pesky scroll bar shows up and it's all defeated.

[How Is It Done?] [The Main Frame Command] [The Frame Sources]