P i x P a r a d i s e

Coding a div layout tutorial part 2

Step 6: If you save your html page with the new div element you will notice that it doesn't do nothing on the page! Why? Well it's because we didn't give any value for top, left, height and width. Besides, the div element as a transparent background so we don't see where it's positionned. In order to see what we are doing, will will add a background attribute in our div code. Add the red part in your code:

<div id=layer2 style="position:absolute; background:#000000; left:0px; top:0px; width:0px; height:0px; padding: 0px; z-index: 2;"></div>

Now, to find you top, left, width and height value, open your unsliced layout in a paint program. I will use MS Paint since everyone as it! I know this can be done in PSP but I don't know for other paint program. Put the pencil tool in the top left corner of your content area. At the bottom of the screen you should see two values:

Step 7: The number found in the previous step will be our top and left values! Note them of a piece of paper. Mine are 181,182. The first number will be the left value and the last number the top value. Now to find the width, you will place your pencil tool in the top righ corner of your content area and note the first value.

Step 8: To find the width, substract your fist value (181) from the second one found in step 7 (678):

678-181=497

So my width is 497 px. Now replace the 0 values in your Div code with the new values found. Set the height with the height of your layout image. Mine is 575.

<div id=layer2 style="position:absolute; background:#000000; left:181px; top:182px; width:497px; height:575px; padding: 0px; z-index: 2;"></div>

Save your html page and look what you've got: Clickie. If the DIV is at the right place, you can now remove the background attribute from the code.

Step 9: To install the DIV element that will content our menu, you will add another div layer code. The code will be ID layer 3 and z-index:3.

<div id=layer3 style="position:absolute; background:#000000; left:0px; top:0px; width:0px; height:0px; padding: 0px; z-index: 3;"></div>

Install the code above the layer 2 like this: (Check the CAPSLOCK notes)

PLACE THE THIRD DIV LAYER HERE (LAYER 3):
<div id=layer3 style="position:absolute; background:#000000; left:0px; top:0px; width:0px; height:0px; padding: 0px; z-index: 3;">
</div>

DIV CODE (LAYER 2):
<div id=layer2 style="position:absolute; left:0px; top:0px; width:0px; height:0px; padding: 0px; z-index: 2;">
</div>

DIV CODE (LAYER 1):
<div id=layer1 style="position:absolute; left:0px; top:0px; width:0px; height:0px; padding: 0px; z-index: 1;">

<table border="0" cellpadding="0" cellspacing="0" width="1002">

</table>

</div>

</body>
</html>

Step 10: To find the values, repeat step 6 to step 8. This is what you should have after installing it: Clickie. (the height should be the same then the one in layer 2: 575px).

Step 11: In the previous step we had a page with our div installed. But... We have a problem. Did you notice at the bottom of the page? When the div element is longer then the layout, the background is white...