Tutorial
Click on thumbnailed images to enlarge
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.
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.
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.
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.
Absolute positioning would result in positioning based on the entire page. Top:0; would move the layer to the top of the page.
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.
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.
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.
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.
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.
Tutorial Comments
Showing latest 10 of 23 comments
@ Design Daddy, Okay I've checked out the website address you posted in your comment but honestly...no offense but the layouts on here for free look better and more professional than the ones you're 'selling'! Come on...
I kinda get it a little more.
:3
ConFuSinGG... but i kidna get a better idea now. THX :]
You can see our div layers here for myspace [url="http://daddydesign.com/ "]http://daddydesign.com/[/ur l]
yes you can make div layers on myspace
This is a very good tutorial. It just gave me the things I needed in a very clear way. Thanks.
I see some guys complain. I wonder if the should go first to not-advanced tutorials. ie: simplyperfect probably needs to go learn img map to make parts of an image to link to different url. VIPStephan says this tutorial is not good because doesn't talk about semantics html, but then again: if you come to a tutorial for advanced users you got to "talk" html, isn't it?
I am happy I find this place.
Saludos!
heyy im still not too sure on these but thanks for taking the time, im sure it took a while =]
i have a much better idea now though =]
thanks!
okay so im making a div, and i have one picture
this picture has text that says like home, msg, cmt, block and so on..
however, i dont get how to make it so that where that certain part of the picture, i can make that a link, that goes to another page
PLEASE help me!
thanks this helped a lot too! :)
i need a code or some sort of attachment that will let me put a backround on my profile when i use this code because it doesn't come with one. it would be awesome if one could be added :]]
alright, so I don't get everything about how to make the DIV layout.
Therefore, I was wondering if you could just send me something to tell me everything about them.
