untitled
viviti
Frame It 101
Quick and simple <IFRAME> Tutorial  
By ObsidianRayne         

Ever notice those awesome home pages that have their 'Messages' and 'About Me' sections in scroll boxes? Those scroll boxes are known as inline frames, or in coder's terms; <IFRAME>'s.

Throughout my time spent on IMVU - I have gotten PM's and have seen several threads asking for assistance on scrolling boxes. Most of the time they are told they should have used the search function. Curious, I tried the search function to see what kind of results the person who needed help would get. I was surprised to see that more than half the stuff I found on it, offered code that didn't always work, or was confusing to understand.

It isn't as difficult as most have been lead to think, and there is more than one way to do it! So sit back, relax, and follow this tutorial, and you'll have your page 'spiffed' up in no time!

 

Framing the Whole Section
 
A basic style sheet IFRAME, will encase the whole entire section, and not just a choice part (EX. Shown in image to the left). I highly recommend using this method for the 'Messages' section.

 

 

Step One: First things first. We'll need to identify what section we want the frame in, and it's realm name. To find it's realm; right click and 'View Source'. Once there locate the body realm and write it down some place axactly the way you see it.

In this Tutorial we will be placing the frame in the "URL" section of a home page. To place it in a different section, just locate the corresponding realm.

 

Step Two: Find the section that you want the frame in. Once you got it, click the 'Edit' button then 'Edit Custom HTML/CSS'.  It's alright if the box isn't empty - It doesn't mater. So Don't get alarmed.

 

 

 

Step Three: Now,  before the rest of your code - hit enter and type out the highlighted portion of code in the sample to the right. If you noticed you have used your realm to pinpoint the location of the frame. You can use this code in all your section if you want. Remember to ALWAYS change the realm though. If you do not, then the code wont work. You can also adjust the height of your frame :P.

Now save, and your done! You've successfully mastered the first method and should have something similar to the example below.

 

 

 

 

Framing A Selected Area
 
This style  is my personal favorite. You have more freedom with it and it makes pages look pretty darn good. With a selected area IFRAME you can only certain parts of a section in a frame, and the others not. you can even have multiple frames in one section with this code. Not only that, but it is one of the easiest to do!

 

 

Step One: Go to the section you want your frame in and click 'Edit', then 'Edit Custom HTML/CSS". From there, locate the beginning of the portion you want in an IFRAME. After you find it, type in the highlighted code you see in the image below (above the beginning of the input you want in a frame).

On Selected area frames, you have the power to adjust not only the height but the width as well! You can also give it an alignment the same way you do with text by typing <center>, and change the thickness it's border.

 

Step Two: Now that you've got the beginning of the code that sets everything into place, you need to close it. Scroll down until you reach the end of the portion you want inputted into a frame, and type the highlighted code in the image below.

Guess what? You're done. So Save and gawk. Easy - wasn't it? You should now have something that looks like this:

 

 

See, that wasn't to painful now was it? If you still find yourself stuck and are in need of help - I am ALWAYS willing to lend a hand. Feel free to drop me a message any time and I'll try my best to help out.

 


Web Hosting · Blog · Guestbooks · Message Forums · Mailing Lists
Easiest Website Builder ever! · Build your own toolbar · Free Talking Character · Email Marketing
powered by a free webtools company bravenet.com