Div layers are similar to tables with a few more options to be spoken of. A div layer is a section on your website in which you can place any information. What it has that can be much more helpful is the ability to specify the location of the layer.
This is a Div Layer
As you will see this just creates a section to write the line above in. Since the style has no border you just see text and there's no background color difference.
The next step that can be taken in a div layer is to change the background color. That can be done using the following code.
This is a Div Layer with a red background
If you don't want background color simply take out that portion of the code. Instead a border can be used to show the edges of the layer.
This is a Div Layer
Here you will notice the border is set to 1 pixel wide and the color of the border is red. Also, notice you need to declare a border style or the border will not appear. Some choices for border style are solid, dashed, or dotted.
In the style section of div which is what we are concentrating on here you may notice that most commands are the same as in any other tag. Therefore padding will work here just as it did in the sections of the table. IF you notice in the previous example the text is right next to the border while in the example below (using padding) we are able to create a space between the text and the border.
The biggest thing to notice about div layers such as these is if you create the size too small the layer will not adjust the size. Text will simply flow out of the border.
Div layers can also have the code overflow:; placed within the style=" " and it can either have hidden or visible as the value of overflow.
Visible displays all text regardless of layer size constraints. Hidden hides it.
Div Positioning
Div positioning is where the whole div layer idea gets a little tougher. There are two types of positioning. Absolute and Relative. Before we get into examples I will do my best to explain the difference.
When using absolute positioning the basis for the distance is the sites borders. Meaning if you position absolutely and say to have it 10 pixels from the top it will be exactly 10 pixels from the top of the page.
When using relative positioning the position is not based on the entire page instead it is based on the bottom of the last thing placed on your site. If a table is written before using a div layer the position is based on the bottom of the table.
Positions can be based on top:;, bottom:;, left:;, or right:;. Try to only use left or right and top or bottom. In between : and ; place the number of pixels you would like the div layer to be from that section.
This is a div layer with positioning 10 from the top and 20 from the left.
Absolute positioning would result in positioning based on the entire page. Top:0; would move the layer to the top of the page.
This is a div layer with positioning 10 from the top and 300 from the right.
What is a Div Layer?
Div layers are similar to tables with a few more options to be spoken of. A div layer is a section on your website in which you can place any information. What it has that can be much more helpful is the ability to specify the location of the layer.
This is a Div Layer
As you will see this just creates a section to write the line above in. Since the style has no border you just see text and there's no background color difference.
The next step that can be taken in a div layer is to change the background color. That can be done using the following code.
This is a Div Layer with a red background
If you don't want background color simply take out that portion of the code. Instead a border can be used to show the edges of the layer.
This is a Div Layer
Here you will notice the border is set to 1 pixel wide and the color of the border is red. Also, notice you need to declare a border style or the border will not appear. Some choices for border style are solid, dashed, or dotted.
In the style section of div which is what we are concentrating on here you may notice that most commands are the same as in any other tag. Therefore padding will work here just as it did in the sections of the table. IF you notice in the previous example the text is right next to the border while in the example below (using padding) we are able to create a space between the text and the border.
The biggest thing to notice about div layers such as these is if you create the size too small the layer will not adjust the size. Text will simply flow out of the border.
Div layers can also have the code overflow:; placed within the style=" " and it can either have hidden or visible as the value of overflow.
Visible displays all text regardless of layer size constraints. Hidden hides it.
Div Positioning
Div positioning is where the whole div layer idea gets a little tougher. There are two types of positioning. Absolute and Relative. Before we get into examples I will do my best to explain the difference.
When using absolute positioning the basis for the distance is the sites borders. Meaning if you position absolutely and say to have it 10 pixels from the top it will be exactly 10 pixels from the top of the page.
When using relative positioning the position is not based on the entire page instead it is based on the bottom of the last thing placed on your site. If a table is written before using a div layer the position is based on the bottom of the table.
Positions can be based on top:;, bottom:;, left:;, or right:;. Try to only use left or right and top or bottom. In between : and ; place the number of pixels you would like the div layer to be from that section.
This is a div layer with positioning 10 from the top and 20 from the left.
Relative positioning would result in positioning based on the item before it. Top:0; would move the layer right below the text or whatever comes before the code.
Hopefully now you all have a better understanding of the use of div layers.
http://www.createblog.com/tutorials/tutorial.php?id=170
http://www.tizag.com/htmlT/htmldiv.php
http://www.lissaexplains.com/html7.shtml
http://www.webmasterworld.com/forum83/200.htm
http://www.faqs.org/docs/htmltut/_DIV.html
http://webdesigninfo.wordpress.com/2007/04/14/css-tutorial-div-layers-classes/
