Creating div tag layout

Creating div tag layout (Templates only!)
Requirements
-PunBB or PhpBB2 forum
-Basic knowledge of CSS and HTML

When you want to get the max out of your forum you need to use PunBB or PhpBB2.

Why?
PunBB and PhpBB2 allowe us to edit templates. This allowes you to edit pretty much every single part.

But to make things easier you can also put div tags all over the place.

Div tags are probably one of the most used tags in html. It allowes you to give a certain part a background, align things and many more.

Today i will teach how to make a div tag for a layout, a background.

As you might have noticed in your templates you see alot things like

Code:

<div class="main">

When you delete all these div class tags you will get a forum with just some text, a background color and maybe some images

You can do this if you want to make your own layout, like Jalokim and me.
But there for you will need to know how to make your own div class tags.

First of all, you will need to create it
Second of all you will need to add it

To create it go to the CSS style page of your forum.
There might be some CSS in it already.

The CSS code we are gona add looks like this. You might put some extra stuff on it but thats not nessencary. This is the basic code you need.

Code:

.(Put a name here, doesnt matter what one)  {
   background:(Type in the background color, in hex (#rrbbgg);
   color:(Type in the font color you want);
   width:(Type in the width you want);
   height:(Type in the height you want);
   font-size:(Type in the font size you want);
}

Now you can add things like

Code:

   -moz-border-radius:

(CSS3 code is this one, not just CSS)
and stuff like that

But im gona go with the basic one for now

So you fill it in
Example:

Code:

.lol  {
   background:#FF2A00;
   color:#C5C5C5;
   width: 50%;
   height:30px;
   font-size:13px;
}

Oh my god, did you just made your own div layout?!
Yes you did.
Easy right?


What we are gona do now is adding it in your HTML
Thats really simple
This is the code we need

Code:

<div class="(name of your div tag in the CSS)>(content)</div>


Now go to the template or html page that you want it to have.
Like this in example

Code:

<div class="lol">This is a div layout ^^<br />
Olé!</div>

The result would be:
http://i608.photobucket.com/albums/tt169/Lil-Jur/divtag.png

some other things you can add in your CSS for the div tag:

Code:


   -moz-border-radius: 10px; (Round corners instead of sharp)
   -webkit-border-radius: 10px; (Round corners instead of sharp)
   border: 2px solid #000; (a border)
   padding: 10px 10px 10px 10px; (padding is the position of your div layout in the website: top-left-bottom-right)
   margin: 50px 70px 10px 10px (margin is the position of your content in the tag it self)
          box-shadow: 10px 10px 5px #888; (Shadow undernead the div tag, to give it a position it also needs padding)
And to make a background with opacity, dont use the normal background thing but use
          background: rgb(255, 0, 0) ; opacity: 0.2;

So for my tutorial
Writen by Lil-J