Basic and Transparent Iframes

Tutorial

Click on thumbnailed images to enlarge

Before continuing with this tutorial, familiarize yourself with div layers. This will make learning iframes much easier. And you should already know how to make pages for your website.

Iframes allow you to create a frame that contains another page inside it. It is a movable frame inserted in a website that displays other pages linked to it.

Click [url=http://www.avalon.ill-wed.com/main.html]here[/url] for an example of the iframe. The main content area is an iframe. If you click on, for example, the "portfolio" link, the "portfolio" page will show up inside a frame, but notice that the address bar still shows the same web address as when you first got to this site.

This is the basic iframe code, which you will need to put on your main page, the one you want the iframe on:
[CODEBOX]

[/CODEBOX]

I will now try to explain the function of each element in the iframe code.
frameborder: Whether or not there is a border around the frame. You can set this to 1, meaning you want a border, or 0, meaning no border.
width: The width of your frame in pixels.
height: The height of your frame in pixels. As far as I know, you can't set this to 100%px to repeat automatically as you can with div layers. If someone knows otherwise, please let me know! =)
src: The page that will show up in your frame when you first go to the site. Mine is set on blog.html because when people first go to my site, I want them to see my blog.
name: Name your iframe. This will be important later on. If it's on your main page, just name it main or something.
scrolling: Do you want your iframe to have a scrollbar? "Yes" for yes you want a scrollbar at all times, "No" for no scrollbar at any time, and "Auto" for only when necessary (this is the default).
position: Leave this alone.
top: How far from the top of your browser window is your frame going to be? (in pixels)
left: How far from the left of your browser window is your frame going to be? (in pixels)

If you want your frame to be transparent, use this code instead of the first one, but also place it on your main page:
[CODEBOX]

[/CODEBOX]

This is basically the same code, but I added some elements.
allowtransparency: Pretty self-explanatory, right? This gives your iframe the capability to be transparent. Leave the setting at "true".
filter: chroma: Whatever color code you put here will be filtered out everywhere. So if you have the color 95E8F9 anywhere else on your page, it will be transparent. So be sure to pick some color you'll never use.

If you want your page to be partially transparent, use this code instead of any of the other iframe codes:
[CODEBOX]

[/CODEBOX]

Notice how this time I added something new.
filter: alpha: This allows your iframe to be partially transparent. 0 being the most transparent, and 100 being the most opaque (non see-through).
If you keep the chroma(color=######), then your iframe will be colored, but partially transparent.

Next comes the more confusing part, so pay close attention! Say I have my iframe on my main page, "main.html". I have my portfolio page, "portfolio.html", which I want the iframe to display. On the main page I have a link that says "portfolio". In the coding, make your link look like this:
[CODEBOX]
portfolio
[/CODEBOX]

See where it says "target=main" in my coding? That allows this portfolio page to show up in the iframe called MAIN on the main page. Remember how you named your iframe earlier, and I said it would be important? Here's where it comes in. So when someone clicks on the portfolio link, that page will show up inside the frame on the main page, instead of going to a completely new page as it would if you were using divs. Add your target to each link that you want to be displayed in the frame.

Now that you are using iframes, all you need for the coding of one page is the CSS/HTML, and the content. You would not want your layout inside a frame on a page which already has your layout, right? So when you code "portfolio.html" for example, this is all that you would have for that page:
[CODEBOX]

Body {background-color: 95E8F9;
scrollbar-arrow-color: #A9E5F0;
scrollbar-track-color: #42BED8;
scrollbar-shadow-color: #42BED8;
scrollbar-face-color: #42BED8;
scrollbar-highlight-color: #42BED8;
scrollbar-darkshadow-color: #A9E5F0;
scrollbar-3dlight-color: #A9E5F0;
cursor: crosshair;
overflow-x: hidden;
font-family: Georgia;
font-size: 12px;
font-weight:normal;
color:#077E94;}
a:link{line-height: 9pt; font-family: Georgia;font-weight:bold; color:#34AABF; text-transform:none;font-size:12px; cursor:crosshair;}
a:active{font-family: Georgia; color:#FFFFFF; text-transform:none;font-size:12px; cursor:crosshair;}
a:visited{font-family: Georgia; color:#34AABF; text-transform:none;text-decoration:none;font-size:12px;cursor: crosshair;}
A:hover {font-family:verdana;color:#FFFFFF;text-transform: uppercase; cursor: n-resize; font-weight:bold;font-size:10;}

Hello, this is my portfolio!
[/CODEBOX]

Now of course, you would change everything to your liking. See where it says "background-color" on the first line of my code? Notice how I put the color code 95E8F9. Ring a bell? It's the color I wanted filtered out. That means when my page shows up inside my frame, I'll be able to see through my page to my layout because the background will be transparent.

I know this tutorial was very long and confusing, so if you have any questions, please PM me or post them here. Thanks, and good luck with your iframes =)