Coding Iframes

At first, coding an Iframe layout can seem really difficult but once you know what you're doing it's quite simple.
>> Please note this doesn't work with MatMice <<

Ok, save this mini layout and open in paint, this is the layout we will be coding.

Take this layout code and paste it into wordpad or something similar so when can start editing it and adding things:

 

First of all, we'll be doing the positioning and the height and width. In paint, put your cursor in the very top left corner of the left frame with the selection tool, and drag down to the bottom right. (Click here to see)

See the numbers in the bottom right hand corner? Well they are the positioning and the wdith and height. The numbers on the far left are the positioning. So in your code in the left frame for the "left" positioning type the number '8' and '130' for the "top" positioning.

Where it says "width" put the number '91' and for height '196' because that is the size of the right frame.
That section of your Iframe code should now look like this:

<iframe FRAMEBORDER="0" BORDER=0 width="91"
height="196" src="left.html"
name="left" style="position:absolute; left:8; top:130" scrolling=CHOICE
allowtransparency="true" target="main"></iframe>

If it doesn't, go back and try again. To continue to code the main and right frame. Use the same steps as the first as your finished iframe code should look like this:

 

Once you've finished, copy and paste your finished code between the <body> and </body> tags of your website and it should work! If your pages are named something other than left.html, main.html and right.html make sure you edit it with YOUR page names.

 

If this tutorial has helped you, please link back! =]