Layering Using Div Tags
Have you ever wanted to create a layout, but are not able to create complex table codes? Div tags are a great and simple way to make some complex layouts without doing too much cutting. I prefer making layouts with table or frame coding myself, but div tags are a good alternative =)
A Simple Div
The most simple purpose of the div tag is to format a block of information. Pretend you have four paragraphs of text. Later on, you decide that you'd like to align all of these paragraphs to the right of the page. To do this, all you would have to do is create a div tag around the information.
<div align="right">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
That would create:
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Very simple, right? This is just the beginning of this wonderful tag =)
Beginning a Layer
The main thing to think about is that divs are used for several things: to layer things on top of each other, and position things on your webpage. So lets create a simple layer!
<div style="position:absolute; top:0; left:0; height:200; width:200; z-index:1;">
Stuff inside div layer
</div>
What does this do? It creates a block of information that has different style properties.
Position
Layers can be positioned anywhere on the page by typing :absolute text to it. If you type :relative next to it, then it will put it on to the page depending on where it was supposed to go if it weren't being positioned.
Top: This is where it's going on the page vertically. Instead of 0, you can put any number of your choice. If you want to align it from the bottom instead of the top, you can replace top with bottom.
Left: This is where it's going on the page horizontally. Instead of 0, you can put any number of your choice. If you want to align it from the right instead of the left, you can replace left with right.
Height: This is the height of the layer. Replace 200 with the height you want!
Width: This is the width of the layer. Replace 200 with the width you want!
Z-index: If you have more than one layer that overlaps, this layer will tell the page which one goes to the front, and which one goes behind. The larger the number, the closer to the foreground the layer will be. The smaller the number is, the closer to the background the layer will be.
In the example, I gave the layers a background colour so that you can see the layering effects better. Click here for the example!
Scrollable Area
There's another use for the div too! (actually there are a lot of uses, but this is a small tutorial! ^^) You can use it to make information scroll in a compact area! This is kind of like frame, but it's a little more Netscape-friendly.
I'm going to use the code from the above example, but I've removed the absolute positioning. All you have to do is add one more style property, which I've shown in bold. You can always add more style codes like I've done if you'd like! =)
<div style="height:200; width:200; z-index:1; overflow:auto; background-color:#000000; color:#FFFFFF">
Stuff inside div layer
</div>
This code has done something very simple. If the information goes over the height or width of the layer, it will create a scroll bar to hold all of the information.
Well, what do you know! The area is now a scrolling one! You can't target pages to load inside this area like frames though, unfortunatly.
I hope this answers your basic questions about div layers!
[ back ]
