|
Coding a div layout tutorial
To do this tutorial, you need a layout and a paint program. I will use paintshop pro but photoshop or photoplus will do fine! You will need to follow one of the slicing tutorials though before beginning the coding part of this tutorial. |
| Step 1: Here is the layout I will use. You can use it to do the tut but it is strictly forbidden to use it to make yourself a website. Click on the image below to see it in it's original size. This layout as been design to fit a 1024x728 screen resolution but if you align it to the left it will look fine on a lower resolution. If you want it to fit a higher resolution, adjust the width of the layout to the width of your screen. |
 |
| Step 2: Slice the layout in your paint program (keep a unsliced version of the layout cause we will need it later in the tut). Make 4 columns and 3 rows to get 12 images. If you don't know how to do that, I invite you to follow my slicing tuts in the goodies section. After doing that, you should have 12 images and a html page. Note that the name and the size of the images as no importance. Open your html page in your browser. You should have something similar to this: Clickie. |
| Step 3: Now lets talk about DIV layer. What is a DIV layer? If you familiar with paintshop pro or photoshop you will notice
that when working on a graphic you can add layer on it. If I take a doll as an example, on the first layer I have my base, if I wanna do a dress I create a
layer and another one for the hair ect. Div layer is the same. Instead of creating a frame to show your content, you create another layer on top of your
layout to show your content. First lets see what a DIV layer code looks like: |
|
<div id=layer1 style="position:absolute; left:0px; top:0px; width:0px; height:0px; padding: 0px; z-index: 1;"></div>
Id: This is just a name to identify your div layer. If you have more then one DIV element, it helps nowing which one is which
and it can be usefull when each div elements as different attributes in a stylesheet. Left: This is the positioning of your div element from the left of your page. If you give a value of 100 as an example, your div will be positioned 100 pixels away from the very left side of your page. Top: This is the top positioning of the div element. Again if you give a value of 100 as an example, your div will be positioned at 100 pixels from the top of your page. Width and height: This is the width and height of your div element. Padding: If you let this value to 0 when inserting text in your div, it will touch each side of the div. Adding a value of 10 as example, will create a padding of 10px around all your content. This is just like the "cellpadding" attribute in a table. Z-index: The z-index is the layer where is located your DIV element. So giving the value 1 would be your first layer, giving the value 2 would be the second layer over the layer 1 and so on. (Will see that later in the tutorial.) |
| Step 4: For this tutorial, we will create 3 layers. One to hold the layout, one for our main content and one for the menu. We have to start with the lowest layer which is our layout. (The content goes over the layout). To do this, in you html page you will add a div code like the one above. Place the opening tag just after the <body> tag. The closing one will go just above the closing body tag. Here is how your code should look like: |
I have put some notes in CAPSLOCK to help you see where to put the code. Do not put them in your coding! Notice that I didn't change any values. They are ok for this layer. We want our layout to be 0px from left and top. The width and height as no importance here since we won't put anything but the layout in this div element. Just so you understand the top and left value, let's changed them to 50 each. Open your page in a browser and see what it does: Clickie. Now your layout as a gap at the left and the top of 50 pixels. Put back those values to 0 and check: Clickie. Tada! Now the layout is positionned a the top left corner with no ugly white spaces beside it! |
| Step 5: Now we will create a new div layer to hold our content. Keep in mind that it's the same thing then working with layer
in a paint program. We want our content to show up on top of the layout. If layout is layer one, content should be layer 2. So the code will be this
one: <div id=layer2 style="position:absolute; left:0px; top:0px; width:0px; height:0px; padding: 0px; z-index: 2;"></div> You will notice that now, the ID is layer2 and the z-index as 2 for value. We have to install that code before the previous div that holds the layout like this (check the CAPSLOCK note): |