Coding Iframes

Iframes are positioned over a layout to show your site pages and content. If you made an iframe layout but you don't know how to code it, this tutorial will show you how.

First you need to make your layout. Make some boxes for the menu, content, etc. Here's an example layout that you can use to practice on:

Open your image in Paint. (This can also work in other programs, as long as there is a selection or crop tool that shows coordinates). Click on the Select tool. Click and drag to draw a rectangle over the area where you want to put your iframe. When you're done with your rectangle, don't let go of your mouse. Press the Print Screen button on your keyboard. Then you can let go of your mouse. Press Ctrl+N and then Ctrl+V to paste the screenshot as a new image. You should see numbers like this at the bottom of the Paint window:

The first two numbers are the pixels from the left and the pixels from the top. The second two numbers are the width and height of the iframe. Add the numbers to this iframe code:

<img src="YOUR LAYOUT IMAGE URL">
<iframe border="0" name="main" scrolling="auto"
allowTransparency="true" src="URL OF PAGE IN IFRAME.html"
frameborder="0" width="IFRAME WIDTH" height="IFRAME HEIGHT"
style="position:absolute; left:PIXELS FROM LEFT; top:PIXELS FROM TOP">
</iframe>

To make the iframe background transparent, add this to the body part of your CSS:

background-color:transparent;

If you have more than one iframe, just copy and paste the iframe part as many times as you need to. Make sure you change the name (name="main") though - you can't have two iframes with the same name.