Post by ~CrAzY~™ on Jan 13, 2007 1:51:17 GMT -5
Ever heard of a div? I'm sure you have. Ever found out everything a div can do? Probably not. I will call them divides in this tutorial, but there's a chance that it's not their official term..
That is a divide. Now, let's do some dissecting to figure out what everything means and how to use it....
<div style=" "> - This is the first line of the divide. Everything between the " " is a style.
position: absolute; - This means that the divide will be positioned in an exact spot, defined by a pixel amount.
top: 50px; left: 50px; - This is the spot where the divide will be located. If you put 0 and 0 in for the values, it would start in the top left corner. With these, you can put the contents of a divide just about anywhere on your site.
width: 200px; height: 100px; - This is stating exactly how big the divide will be. It can change size, just like a table, to fit different things. (If these are left out, it will resize to fit the size of it's contents.)
overflow: auto; What this involves, is scrollbars. It allows you to put as much text or anything in the divide and it will never get bigger. It will just add scrollbars to allow you to move around the text. Let's see an example:
This code will make it so it scrolls really far horizontally. If I hadn't added the <br />, it would continue as one line of text until it stops, or there is a break.
padding: 0px; - If you were to change this to, let's say, 20px... It would make it so nothing shows within 20px of the edge of the divide.
Notes about using divides: The style=" " tag is set up in a way so you can use normal CSS styles for the divide without needing a CSS sheet. You can add a lot more styles than the ones I put up.
Divides are great for positioning tables and images on a site. Anything can go in a divide.
I hope this tutorial helps. Any questions/comments, please post em here.
<div style="position: absolute; top: 50px; left: 50px; width: 200px; height: 100px; overflow: auto; padding: 0px;">
Content
</div>
That is a divide. Now, let's do some dissecting to figure out what everything means and how to use it....
<div style=" "> - This is the first line of the divide. Everything between the " " is a style.
position: absolute; - This means that the divide will be positioned in an exact spot, defined by a pixel amount.
top: 50px; left: 50px; - This is the spot where the divide will be located. If you put 0 and 0 in for the values, it would start in the top left corner. With these, you can put the contents of a divide just about anywhere on your site.
width: 200px; height: 100px; - This is stating exactly how big the divide will be. It can change size, just like a table, to fit different things. (If these are left out, it will resize to fit the size of it's contents.)
overflow: auto; What this involves, is scrollbars. It allows you to put as much text or anything in the divide and it will never get bigger. It will just add scrollbars to allow you to move around the text. Let's see an example:
<div class="divider" style="position: absolute; top: 50px; left: 50px; width: 200px;
height: 100px; overflow: auto; padding: 0px;">
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@
<br />@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@
</div>
This code will make it so it scrolls really far horizontally. If I hadn't added the <br />, it would continue as one line of text until it stops, or there is a break.
padding: 0px; - If you were to change this to, let's say, 20px... It would make it so nothing shows within 20px of the edge of the divide.
Notes about using divides: The style=" " tag is set up in a way so you can use normal CSS styles for the divide without needing a CSS sheet. You can add a lot more styles than the ones I put up.
Divides are great for positioning tables and images on a site. Anything can go in a divide.
I hope this tutorial helps. Any questions/comments, please post em here.