div layers tutorial

This tutorial is for anyone who has been using frames of any kind and wants to move to div layers and php.

There are many advantages to this move, some of the big ones being;

Pages have their own url so can be bookmarked
You will never have visitors viewing a large image inside a small frame space, or trying to get a link to another site and bring that up in the frame
Google and other search engines are more likely to find words searched if they are on pages as opposed to frames.

This can be a very simple and straight forward procedure.

First open your main page. The one you have your graphic/banner on and your position of the frames. You need to rename this to 'header.php'. Take off all the frames so you are left with your background only. If you have a navigation also in the form of a frame you can create a div layer for this by coding the following:

You can see from above that the div layer is opened and positioned much like a frame, the content is then coded and the div layer is ended as you would end any codes.

Now let's take what would be your main frame where the content would open up for each page. This you only need to open the div layer for. Literally you have to think of this as a sandwich. The header.php is the top slice of bread. Your content pages are the filling and the last page you will create to end the sandwich will be the footer.php

So to open your div layer for the main content you literally code like this:

<div class='textbox' style="width: 510; height: 900; position:absolute;top:414; height:376; overflow:auto; left:165">

So I've requested the div layer, labelled it my textbox, positioned it and given it an overflow instruction so scrollbars will appear if needed. Lastly you need to remove any </body> and/or </HTML> tags from this page as we will conclude in the footer now.

This is the end of your header.php

Now for the easy footer.

All you need in this is to close the div layer, and close the main page. So very simply my coding would look like this:

And now for the part you need to action on each page. But just think once you've done this you will never have to make any changes to individual pages again!

So at the top of each page you need to add:

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Pragma" content="no-cache" />
<link rel="stylesheet" type="text/css" href="http://deadly-nightshade.com/stylesheet.css" />
<title>. . b e l l a d o n n a . .[deadly-nightshade.com]</title>
<meta content='BELLADONNA is a multi-fandom fansite featuring art from many different shows as well as goodies for other artists.' name='description'/>
<meta content='screencaps, fanart, photoshop, photoshop brushes, textures, Buffy, Angel, Gilmore Girls, Dollhouse, Supernatural, Terminator: The Sarah Connor Chronicles, Twilight, Veronica Mars, The Vampire Diaries' name='keywords'/>

<SCRIPT TYPE="text/javascript"> 

</SCRIPT>
 
<SCRIPT TYPE="text/javascript"> 

</SCRIPT>
 
<script type="text/javascript">
	function show(id) {
		document.getElementById(id).style.display = 'block';
	}
	function hide(id) {
		document.getElementById(id).style.display = 'none';
	}
	</script>
</head>

<div id="nav" style="position: absolute; left: 150px; top: 463px; height: 157px; width: 200px; background: #073021">
<h4>welcome</h4>
<p align="center">Welcome to <font color="#FFFFFF"> <b>BELLADONNA</b></font> a multi-fandom fansite featuring art from many different shows as well as goodies 
for other artists.<BR>
<font color="#FFFFFF"><b>belladonna and deadly-nightshade.com are © Nikki</b></font><br><br>

This site has been open since September 2008 and has had <script type="text/javascript"> 
var sc_project=4055095; 
var sc_invisible=0; 
var sc_partition=50; 
var sc_click_stat=1; 
var sc_security="b7491f94"; 
var sc_text=2; 
</script><script type="text/javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><div class="statcounter">
<a title="site stats" href="http://www.statcounter.com/" target="_blank"><img class="statcounter" src="http://c.statcounter.com/4055095/0/b7491f94/0/" alt="site stats" ></a></div></noscript><b> visitors</b>

</div>

<div id="nav" style="position: absolute; left: 150px; top: 630px; height: 100px; width: 200px; background: #46922b">
<h4>link here</h4>
<p align="center">
<img src="http://www.deadly-nightshade.com/www/linkhere/belladonna-100-17.jpg"><br>
<a href="http://www.deadly-nightshade.com/www/linkhere.php">More Buttons</a></div>

<div id="nav" style="position: absolute; left: 150px; top: 740px; height: 80px; width: 200px; background: #073021">
<h4>dailies</h4>
<p align="center">
<a target="_blank" title="Wendy @ Black Lagoon" href="http://blacklagoon.left-unspoken.net/"><img class="borderimage" src="http://www.deadly-nightshade.com/img/dailies.jpg"></a>
<a target="_blank" title="Jenni Lou @ Daydreaming" href="http://www.fractured-simplicity.net/"><img class="borderimage" src="http://www.deadly-nightshade.com/img/dailies.jpg"></a>
<a target="_blank" title="Bre @ Primodial Souls" href="http://www.primordialsouls.com/"><img class="borderimage" src="http://www.deadly-nightshade.com/img/dailies.jpg"></a>
<a target="_blank" title="Chris @ Salt'n Burn" href="http://saltnburn.deadly-nightshade.com/"><img class="borderimage" src="http://www.deadly-nightshade.com/img/dailies.jpg"></a>
<a target="_blank" title="Olga @ Ugly Business" href="http://uglybusiness.deadly-nightshade.com/"><img class="borderimage" src="http://www.deadly-nightshade.com/img/dailies.jpg"></a>
<a target="_blank" title="SayJay @ Radiance" href="http://www.left-unspoken.net/radiance/"><img class="borderimage" src="http://www.deadly-nightshade.com/img/dailies.jpg"></a>
<a target="_blank" title="Matilda @ Mongrel Minds" href="http://www.left-unspoken.net/mongrelminds/"><img class="borderimage" src="http://www.deadly-nightshade.com/img/dailies.jpg"></a>
<a target="_blank" title="Amy @ Sweet Escape" href="http://sweetescape.misplaced.co.uk/"><img class="borderimage" src="http://www.deadly-nightshade.com/img/dailies.jpg"></a><br>
<a href="http://www.deadly-nightshade.com/www/affiliates.php">All Affiliates</a>
</div>

<div id="nav" style="position: absolute; left: 150px; top: 830px; height: 140px; width: 200px; background: #46922b">
<h4>disclaimer</h4>
<p align="center">
<b>Please do not alter, copy, repost, remake anything on this site without my permission.</b><br><br>
Do not claim any material from this site as your own. All artwork on this site is for personal use only, I do not make any profit from this site.
</div>

<div id="nav" style="position: absolute; left: 150px; top: 979px; height: 410px; width: 200px; background: #073021">
<h4>tagboard</h4>
<p style="text-align: center">Please leave a message below;<br>
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div>
	<iframe frameborder="0" width="180" height="238" src="http://www4.cbox.ws/box/?boxid=3584402&boxtag=1970&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#798564 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="180" height="75" src="http://www4.cbox.ws/box/?boxid=3584402&boxtag=1970&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#798564 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
</DIV>

And at the bottom of each page:

This is telling the page that it needs to open the header and the footer and to be displayed where you placed your textbox div layer.

It's really as simple as that. The only last thing you need to remember is your links as they won't need to open pages in frames anymore! Just the default page is fine!