the purpose of iframes is to make chaning css, links and such easier on yourself. with out them, for example, if you decide to add link on one page, you have to add it to all of the other pages as well. that can be more than frustrating. so that is why i decided to create this tutorial. it's a bit long and tideous, but think about me having to write it all, haha. just playing, it was super fun. o.o
first off, create 3 pages, name them index, home, and style.
now copy the following code into the index page, or notepad, either's fine.
that is the basic code. now all you really have to do is plug in stuff. if that's all you needed, then you're pretty much set. (; if not, continue, i'll explain each piece.
for this part:
<style>CSS CSS CSS
</style>
just replace 'CSS CSS CSS' with your... CSS. ;p if you have no idea what i'm talking about, take a look at the basic css tutorial.
<div style="position: absolute; top:0px; left:0px;">
<IMG SRC="LAYOUT LINK" border="0px">
</div>
"layout link" with your actual layout link. haha, do i really need to be explaining this? xD
now, see all of the NUMBER's everywhere? you will need to replace each of these with an actual number, if you don't know what they mean, try going to my
div layer tutorial
now here is our first important part:
<div style="position: absolute; top: NUMBERpx; left: NUMBERpx; width: NUMBERpx; height: NUMBERpx; overflow:auto;">these 'NUMBERS' should make out the div layer for your navigation content.
<a href="http://overagain.net" target="iframe1">link</a>
</div>
now onto this other important part...
<div style="position:absolute; left: NUMBERpx; top: NUMBERpx;overflow:no;>
<iframe frameborder="0" border=0 name="iframe1" src="LINK TO YOUR HOME PAGE" width=NUMBER height=NUMBER marginwidth=0 marginheight=0 scrolling=auto overflow=auto border=0 allowtransparency="true"></IFRAME>
</div>
replace 'LINK TO YOUR HOME PAGE' with the home page that you made. we'll get to that later. this is the most important part of the iframe process, since it's the actual iframe itself. where you position this box is where all your main content should go.
now when you look at the layout the place where you set it to be should just be completely blank.
now's the time to make that page unblank baby. O;
paste this code into your home page:
this is the same code that you will have to place in every page you would like to appear in the iframe.
the only thing you need to change is the 'CSS LINK'... it's just the link to a stylesheet, which i ABSOLUTELY recommend. it's just the css, you can just copy the same css you made in the index page into your stylesheet, and it'll be perfecto. ;]
if you absolutely insist that you don't need a stylesheet... replace
<link rel="stylesheet" type="text/css" href=CSS LINK>
with your css!
and your done. ^^ i know i tend to talk... ungramatically correct sometimes, haha. i'm also not the best at explaining things. xD so if you have any questions about this tutorial, don't be afraid to lykecomebacksoonuno@hotmail.com. i'm sure you aren't the only person with the same question. o.o
