Division Layers

Division layers sets apart a section of the page and can be placed anywhere in your site. It can overlap a table or overlap another division. It's a very handy tool in making weblayouts look even better!

Div 1 code:
<div id="name" style="position:absolute; left:350px; top:675px;
background-image:url(background.gif); border:1px solid #000000; width:100px;
height:100px; background-color:#99CCFF; padding:5px; z-index:2;">
This is Divison 1</div>

Div 2 code:
<div id="name" style="position:absolute; left:400px; top:725px;
background-image:url(background.gif); border:2px dashed #666666; width:100px;
height:100px; background-color:yellow; padding:5px; z-index:3;">
This is Divison 2</div>

Div 3 code:
<div id="name" style="position:absolute; left:485px; top:775px;
background-image:url(background.gif); border:3px dotted #996600; width:100px;
height:100px; background-color:pink; padding:5px; z-index:1;">
This is Divison 3</div>

Div 4 code:
<div id="name" style="position:absolute; left:500px; top:825px;
background-image:url(imageURL);
border:5px dotted #996600; width:100px; height:100px; background-color:none; padding:5px;
z-index:4;"> This is Divison 4</div>

To view the result of the above codes click HERE.

As you can see on our example, we have 4 division layers on this page and they have different style attributes and locations on the page. Just like told earlier, divisions can overlap anything as long as you place them on the right location!

Division Attributes

1. id - this is the name of the division...you can understand more about this when you check out our css tutorials.
2. left - this is the position of your division from the left part of your page.
3. top - this is the position of your division from the top most part of your page.
4. background-image:url(image.gif) - place this code (subs the image.gif with your image URL) if you want to place an image as your background
5. border - this would be the line around your division layer
6. width - the width of your division in pixels
7. height - the height of your division in pixels
8. padding - this is the margin within your division. You set this to keep the text from starting and ending at the very edge of your division.
9. background-color - if you want to set a background color on your division.
10. z-index - this is to set which division should appear first. The division whose z-index is 1 shall be closest to the background. If you notice from our example Div 1 overlaps division 3 because division 1's z-index is 2 while division 3's z-index is 1, thus division 3 is closest to the background than division 1.

Share |