Let's recap the values we got from our previous steps. For our menu box -- X=61, Y=156, W=127 and H=288. For our main
and larger box -- X=324, Y=61, W=413, and H=384. Let's create two new div layers, and input these values into both of
them, as well as input some text so we can see how it turns out...
--------------------------------------------------------
<html>
<head>
<title>!--Site Title Here--!</title>
</head>
<body>
<div style="position:absolute; left:50px; top:50px; width:700px; z-index:1">
<img src="layout.jpg" border="0">
</div>
<div style="position:absolute; left:61px; top:156px; width:127px; height:288px; z-index:2;
overflow:auto">
Welcome to the menu box, this is where all your links will typically go.
</div>
<div style="position:absolute; left:324px; top:61px; width:413px; height:384px; z-index:3;
overflow:auto">
Hey! This is your main/contents box, where all your bigger contents will go for your many webpages.
</div>
</body>
</html>
--------------------------------------------------------
And here's our end product: www. Notice how your text stays
within the outlined box and such. Congratulations! You've just done some sucessful divide layers coding. Now let's
move on to some of the extra stuff I said I would talk about...
When HEIGHT is necessary...
In the layout I've been using in my example, having a defined height IS necessary because it's set within an outlined
box with a both height and width dimensions. Here's what would happen if we didn't set a height for our divide layers:
www. See how the text goes way out of your layout??? Really
not what we wanted, right? As I mentioned before, height is not needed ONLY if your layout is styled without a
height, or an expandable height, like this sort of divide layer layout: www.
This is where OVERFLOW:AUTO is needed...
Since we do want the content to stay within the box, you need to set the overflow value to auto. So if your
content is much larger than the outlined boxes (as shown in the previous "no height" example page), it'll force your
content to scroll rather than go outside of the boxes. Like so: www. See how it stays within our outlined boxes with the help of scrolling? That's how
we want it in the case of that layout.
We don't need the z-index???
I've actually never used the z-index attribute to be perfectly honest with you. I've learned about it a little
later in mid-2005/2006...but I haven't really seen the need to use it. Unless you're one of those people who does that
perfect "valid HTML" check like many do. But if you don't care about that, then okay. There's a way to "escape" from
using the 'z-index.' Just place whatever div layer you want on the bottom of other layers...first on
your webpage (as you're coding it). So here's the coding again, without the z-index attributes, and if I had placed
our menu layer...first in our coding...
--------------------------------------------------------
<html>
<head>
<title>!--Site Title Here--!</title>
</head>
<body>
<div style="position:absolute; left:61px; top:156px; width:127px; height:288px;
overflow:auto">
Welcome to the menu box, this is where all your links will typically go.
</div>
<div style="position:absolute; left:50px; top:50px; width:700px">
<img src="layout.jpg" border="0">
</div>
<div style="position:absolute; left:324px; top:61px; width:413px; height:384px;
overflow:auto">
Hey! This is your main/contents box, where all your bigger contents will go for your many webpages.
</div>
</body>
</html>
--------------------------------------------------------
Now see here: www. See how you can't see anything in the
menu box. I assure you I put text there, as shown in the coding above. But since we have no z-index values, and
because I placed our menu layer before the image layer...the browser automatically interprets it that
you want the menu layer on the BOTTOM, then with the image layer on TOP, then with the main layer also on top. So,
to alleviate the problem, all we need to do is place our layout image FIRST...
--------------------------------------------------------
<html>
<head>
<title>!--Site Title Here--!</title>
</head>
<body>
<div style="position:absolute; left:50px; top:50px; width:700px">
<img src="layout.jpg" border="0">
</div>
<div style="position:absolute; left:61px; top:156px; width:127px; height:288px;
overflow:auto">
Welcome to the menu box, this is where all your links will typically go.
</div>
<div style="position:absolute; left:324px; top:61px; width:413px; height:384px;
overflow:auto">
Hey! This is your main/contents box, where all your bigger contents will go for your many webpages.
</div>
</body>
</html>
--------------------------------------------------------
And here we go: www. See how we can see the menu layer now?
Since we placed the layout layer first, our browser automatically interprets that the layout layer should be placed on
the bottom, just as we wanted it if we were to use the z-index attribute.
What if I don't have Adobe ImageReady?!?!
No problem. You can also find your left, top, height, and width points by using the basic Paint program. So
just follow the same steps as before: view the webpage, and press the "Print Scrn" button to copy it. Except this time,
you'll be opening your Paint Program. Using the 'Select' tool, just trace over the same place where you want the
text to be. And you'll see the x, y, w, and h (left, top, width, height respectively) values show near the bottom right
of the screen. You can see the screen-cap of it below... (click on the thumbnail for the full view)
And...that's it!! This concludes my basic divide layer tutorial. I hope it's been of help to you, and you've
learned quite a lot. I hope that you'll enjoy using divide layers for your layouts and webpages. Thank you very much
for reading through this tutorial.
