Using Div Layers Properly
>> Click here for an example <<
This tutorial requires that you have some knowledge of HTML and IFRAMES. You may be able to follow along in a WYSIWYG editor however, it is my suggestion that you do this in notepad. If you know how to change your screen resolution to test how your page looks in various resolutions, that is helpful as well.. I suggest optimizing your page for 800 x 600 resolution as it is the default for most computer manufacturers and alot of people do not know how to change their resolution from such. It is difficult to make a site unviewable to 1024 x 768 or above, though I have seen it done a few times..
For those who know the basics of div layers, the way to keep them positioned properly is as simply explained as this : Put each object into it's own layer.
For a more detailed explanation, follow along :)
The result of this tutorial should be a page with an inframe with objects positioned over the iframe so the scrollbar rolls under said object. For the purpose of this tutorial I am using the butterflies below as the objects to be over the scrollbar / iframe. I would suggest using these for the purpose of this tutorial as well. PLEASE do not steal this tutorial (reworded or otherwise ) and offer from your website, through email, etc... Thanks :)
So grab these and save them to a folder on your hard drive.
First things first :) You must make two ( 2 ) html pages. Let's call one grown.html and the other innerchild.html :) Grown will be our main page, while innerchild will be what loads within our iframe. Select a background tile of some sort to distinguish where your main page ends and your iframe begins. Im using the teal tile from the tiles page under linkware. Make this background tile the background of grown.html.. Now select a matching color and make it the background of innerchild :) So we should have two web pages that look similar to this in code :
For the most part we are working with the page grown.html. If ever otherwise I will cearly state it. So set innerchild.html to the side while we work on grown.html. Add a table width 500 height 400 cellpadding 5 cellspacing 5 border 0. For the purpose of this tutorial we are only using 1 row and 1 column ( for the iframe ) however for the purpose of a functioning website you would really need to add a column or row for links ( or you could put links in their own table and use layers to position them properly ) . When using div layers, percentages are not the smart way to go. Layering requires precise pixel measurements in order to keep the objects positioned properly in various screen resolutions. So here is our page with the table in it
Now we will add our IFRAME. frameborder 0, width 500, height 400, src innerchild.html, name love .. Dont forget to close your tags. So here is what we have now :
It is time we put this table into a layer. Now above the first table tag,
create your first div layer. Id - content, style - position:absolute; width:500px;
height:400px; z-index:1; left: 150px; top: 10px;
The left and top properties are in pixels and totally up to you. They represent
the margin you will create for specifically for that object from the top and
left sides of the screen. You want to make sure not to make the left margin
too large if you are going to make your iframe wide. An iframe that is more
narrow can have a larger left margin. I also prefer to keep my viewers from
having more than one scrollbar to fiddle with and try to keep the top margin
to 10 or below. Naming your lyaer is important as well since you may need
to go in and tinker with the positioning, it is easier to give it a unique
name that will be easy to locate with your FIND NEXT tool :) The z-index tells
you where this layer is positioned i.e. will it be under another layer or
over another layer. For your butterfly to site over your iframe, the butterfly
layer must have a higher number z-index than the iframe. So keep that in mind
for future reference.
And this is what I have now : Yours should be similar..
I strongly suggest opening your grown.html page with your browser so you can see how it is positioned etc.. Also reset your screen to see how it will look in other resolutions specifically 800 x 600 and 1024 x 768. If you do not know how to reset your screen resolution, that is ok. Just do the math and make sure the width of your left margin and the width of your table together do not exceed 700 pixels. Also make sure the height of your top margin and the height of your table do not exceed 450 pixels.
Let's add our butterflies now :) Add your butterflies to the page below or above your content div ( div id ="content" ) Make sure you do not add your images between the current div layer tags. This will make your butterflies move within the table layer and we dont want that . I am adding my butterflies below the content div. So my code now looks like this..
We will have to create a seperate layer for each of our butterflies.. dont forget to give them unique ids. The one gliding toward the left should be name right-butterfly the one gliding toward the right should be named left-butterfly as these are the sides of the iframe they will be overlapping. Make the div layers the same width and height as the butterfly it is holding. The left-butterfly layer should have a left margin be about 15 to 25 pixels less than the left margin of the content layer. The right-butterfly layer should have a left margin the same amount as the sum of the content layer width and the content layer left margin minus 10 to 25 pixels..
Right butterfly = content layer left property - 15 to50
Left butterfly = content layer left property + content layer width - 10 to 50 pixels
The math might be confusing a few people. Don't feel bad, algebra didn't grow on me until I was no longer getting graded on it lol..
Don't forget the z-index for your butterflies must be a higher number than anything you want to go under them ( i.e. the layer holding your table and iframe ) So if your content layer ( the layer holding your iframe ) is z-index = 1 than your butterflies must be z-index 2 or higher.
This is what I have for the butterfly layers...
Personally I would leave the arrows available to your viewers so make sure to increase the top margin of at least your right-butterfly layer, in this case or your viewer may not be able to scroll all the way up ward. I have increased the top margin of the right-butterfly to 35. For designs skae I decided to increase the top margin of the left butterfly layer to 75 . Play around with it until you get something you like :)
Now the layers will have to be adjusted depending on the width and height of the table, iframe, and the objects you want to overlap or float on the page. This tutorial was designed to give you the basics, from this you must experiment to perfect your own designs :)
Time to open innerchild.html Basically all you have to do is add enough cotnent to this page so that the scrollbar shows when you view grown.html Once the scrollbar shows, if it doesn roll under the butterfly on your right, then you need to adjust the butterflie's left and top margin properties accordingly :)
I have also gone in and added colors to my scrollbars so the butterfly stands out even more :)
I hope this has helped you in designing your own laeyered website :)
~Link Hearts Enchanted~
Links are definitely appreciated! Please feel free to right click to save one of these images to your hard drive and link them back to:
http://www.heartsenchanted.com
Thanks for your support!
