Ok so you've probably heard <DIV> being mentioned alot recently, i swear by them and use them to make all my layouts, they can be used for all sorts...in replace of tables, iframes, text areas and more. You can also use them to position anything anywhere on your page.
The basic <DIV> code looks like this...
/* Code block */
<DIV id="name" style="position: absolute; top: 100px; width:100px; left: 100px;" align=left>Your HTML </DIV>
The parts you need to edit are the things in blue.
The div ID can be anything you want, its just to make it easier on you if your using lots of <DIV>s, so if for example you were using this one to position your main content you could call it content.
The top, width and left attributes are what you need to edit to position the div, in the exmple it is 100 pixels from the top of the screen, is 100 pixels wide and 100 pixels from the left of the screen.
Align is used in the same way as any align tag to align the content of your div to either the left, middle or right.
You can also position the div from the bottom or right by simply changing the word top for bottom or left for right and any variation on that. example:
/* Code block */
<DIV id="name" style="position: absolute; bottom: 100px; width:100px; right: 100px;" align=right>Your HTML </DIV>
Hide it
If you want to 'hide' something..such as your counter or tracker for example you can do that by adding visibility: hidden; to your DIV code...
/* Code block */
<DIV id="name" style="position: absolute; top: 100px; width:100px; left: 100px; visibility: hidden;" align=left>Your HTML </DIV>
Scrolling
Now we can make a <DIV> appear like an iframe by adding a scrollbar and height attribute to it...
/* Code block */
<DIV id="name" style="position: absolute; top: 100px; width:100px; left: 100px; height:380px; overflow: auto;" align=left>Your HTML </DIV>
Where the height is obviously the height of the div and adding overflow:auto; gives us the scroll bar.
Z index
If your useing numerous <DIV>s you might find that things appear 'in the wrong order' Like if you wanted an image below some text but the image appears above the text, this is where you need to use z index. The higher the number you give it the higher it will be on the page. Heres an example of how to put text above an image.
/* Code block */
<DIV id="name" style="position: absolute; top: 100px; width:100px; left: 100px; z-index:1" align=left>Image code </DIV>
<DIV id="name" style="position: absolute; top: 100px; width:100px; left: 100px; z-index:2" align=left>
Your text</DIV>
Make it pretty
You can add any of the following tags to add a bit of colour...
/* Code block */
background-image:url(http://www.yousite.com/image.jpg);
background-color: #000000;
border-color:#000000;
border-style: solid;
border-top-width: 1px;
font :12px;
background-attachment: fixed;
border-right-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR:#000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #F4DC9E;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
SCROLLBAR-BASE-COLOR: #000000;
If you have any questions or require further help on this tutorial please ask at Sway Forum where either myself or someone else will help you out. Any emails asking for help will be ignored.
Example
See?
< Back
