Territory Description

_________________________________________________________________________________________

First off, we will customize your free area called the 'Territory Description'.
NOTE: Please ignore asterisks * as I only put them in to SHOW you the code, rather than show what it does!

1. Simple boxes
Some of you like boxes. We know you do ^-^.
To do this, we use HTML. HTML are tags you use which include these arrows <>. For a box, we use 'div' tags. HTML tags are basically like brackets... open <*di*v*> and close <*/di*v*> just like open ( and close )!

To style a tag, you would add style="" within the opening tag, for example, <*di*v* style="">Content in box here<*/di*v*>
The style links to CSS...

To define the width and height, you would make it like so: <*di*v* style="width:400px;height:400px;">Content in box here<*/di*v*>
It doesn't matter which goes first, just as long it's there! Remember that speech marks 'backet' the CSS coding and after each statement, you must add a semi-colon ; to tell the computer that it ends there!
The structure for CSS is basically: element: style ; You must remember both the colon and semi-colon! :)

With this, you can add more and more, for example
border:1px solid #000000;
color:#000000; (colour links to text colour)
background-color:#FFFFFF;
Etc!

If you want your box to have a scrollbar once full, just add
overflow:auto;

2. Boxes next to each other
Urgh. For this, you can use tables... or just use the CSS property float:left;
For a table generator, click here!

To use the float:left;, it's just as simple as:
<*di*v* style="width:200px;height:200px;float:left;">Content in box here<*/di*v*><*di*v* style="width:200px;height:200px;float:left;">Content in box here<*/di*v*>
And here it is demonstrated:


Unlike other elements, you can't center divs using regular <*cent*er><*/cent*er> tags :C I know, sad right?
But all you need to do is bracket your entire coding with:
<*di*v* style="margin:0 auto;">Your box coding whatever stuff here<*/di*v*>
:3

3. Regular Ol' Stylin'
Check out Kay's awesome thread on styling text, using images, and tables :D

4. Positioning
You want to position something specifically...

~ If you scroll down, the object scrolls along
.....Use position:fixed;
~ Exactly at the top right (feel free to change numbers to make it at a different area)!!
.....Use top:0px;left:0px;
~ A little above the object (change it to bottom, left or right)
.....Use padding-top:5px; or margin-top:5px;