Basic Divide Layers Tutorial

How to Code Your Layout in Divide Layers
Or as some people might refer to it: "div layers." Divide layers is a pretty common and popularly used coding for your layout and content. It allows you to position images and text anywhere on your webpage. And it's also easy to learn and use, in comparison to frames and tables, I think. For this tutorial, we're going to be doing the simple: placing a layout image somewhere on the webage, and placing some content over the layout image.

First thing of order, of course, is your layout image. For this example, I'll be using this one: [ www ] A layout with two outlined and highlighted boxes in it. The boxes are where we want to place our text/content inside. Now that we've got our layout image, let's start by just putting your image onto the webpage.

--------------------------------------------------------
<html>
   <head>
     <title>!--Site Title Here--!</title>
   </head>
<body>

<img src="layout.jpg" border="0">

</body>
</html>
--------------------------------------------------------
By just doing the above, we get this: www A The layout image is, by default, placed nearly to the top-left of the webpage. I believe a webpage, by default, also has a sort of set margin on it. Which is why the layout image isn't entirely at the top-left of the page. Also a good thing about div layers -- it ignores default page margins.

So, now I'll introduce to you div layers coding...
--------------------------------------------------------
<div style="position:absolute; left:#px; top:#px; width:#px; height:#px; z-index:1; overflow:auto">
This is a divide layer...
</div>
--------------------------------------------------------
The above is an example of using divide layers for a block of text. Most of it is pretty self-explanatory...

<div and </div>
Like your typical HTML coding, these are the opening and closing tags for the divide layer -- telling it where to begin and when to end.

style="...
The style begins the specifications on how you wants your divide layer -- where you want it positioned, how big you want it, etc.

position:absolute;
This means we want the divide layer to be positioned according to the values we're going to specify in the next part of the coding.

left:#px; top:#px;
The '#' we put after 'left' is the number of pixels we want our image to be away from the left edge of the webpage. Similarly, the value after 'top' is the number of pixels we want the image to be away from the top edge of the webpage.

width:#px; height:#px;
This is where you specify the dimensions of your divide layer, or how big you want it to be for your text -- similar to defining width and height like tables, really.

z-index:1;
This part is for when you want a divide layer to overlap another divide layer (like how I want to do with my example). The divide layer with a z-index of 1 will be the bottom-most layer -- so that any other layer with a z-index of 2 or higher will overlap over it. However, I don't find this part of the coding too necessary, as you can designate which layer overlaps which layer by the order you place them in your coding (which I'll explain near the end of this tutorial).

overflow:auto">
Overflow controls whether or not we want the divide layer to scroll (auto) or NOT (visible). Similar to frames or a textarea box. This is especially important if you have a layer with a specified width AND height. If you don't have a specified height limitation, then this overflow value is not needed, technically. I will also explain this near the end of the tutorial.

Okay, now that we can understand what each part of the code does, let's use it on our layout image, first. Let's say we want to...have our image 50 pixels from the left and from the top.

--------------------------------------------------------
<html>
   <head>
     <title>!--Site Title Here--!</title>
   </head>
<body>

</body>
</html>
--------------------------------------------------------
With the above coding we get this: www. Compare it with this: www, and you'll notice the difference in the position of the image. I also set the width of it to the width of the image. AND you'll notice I took out the height attribute. Height is usually only needed if you want your divide layer to scroll (when setting overflow:auto). If you don't care how long an image or your contents extend, then height can be left out, and it's just the same as with width. Since we do NOT want the image to have any scrolling/scrollbars, then we simply leave out the 'overflow:auto' part. We want the image as a complete whole.

Now let's move on to adding more divide layers for our words! >>>