"Bingo!" you cry as you open up Photoshop. You've discovered the perfect idea for a brand new website. Everything seems to flow together beautifully: the stroke of the airbrush; the colouring of pixels; the slicing of images for the website optimization... "Nothing could go wrong now!" you gush with delight as you finish off your HTML coding. You preview it in your browser only to realize that your website looks like :



when you want it to look like :

.

You've tried opening it up in Dreamweaver and tweaking it around, but it doesn't seem to align. You try opening it up in HTML, staring at all these different numbers. You change one, and all of a sudden it looks like :

.

  There, there. Crying and yelling at the monitor won't solve anything. No, neither will kicking it. Instead of spending hours trying to figure out why the tables won't align, why not just use layers and Cascading Style Sheets? CSS (Just call it CSS; it'll make your life much easier) are a wonderful thing in this case. It acts almost as a your own, manual GPS (Global Positioning System). Providing you understand how to operate it, of course. Since you are reading this article, it is under the assumption that you do not understand how to position your layer.

  Since there are two layers being used for the text, and two more for the images for your final product, I'll be creating one layer - the "Top Story" layer. After this tutorial, it should be fairly simply to figure out the rest.

 First things first, you need to create the layer. This can be done using the following code:

 <div id="NAME" class="MyLayer1">layer contents go in here</div>

.MyLayer1 {
    position : VALUE;
    width : *px;
    height : *px;
    z-index : *;
    left : *px;
    top : *px
}

(* = the number value)

 In this case, MyLayer1 should look like:

.MyLayer1 {
    position : absolute;
    width : 214px;
    height : 245px;
    z-index : 2;
    left : 389px;
    top : 163px
}

  That certainly looks confusing to the untrained eye! So how about I break it down for you? It's really not that difficult once you understand the basic functions.

  This represents your opening tag. What does "div" stand for? Whatever you want it to stand for. Divide, dividend, divorce, you name it. It really doesn't matter. All that matters at this point is to know when you see <div> anywhere in an HTML document, you are dealing with a layer.

This identifies this layer.

  stands for exactly that -identification. If you are using more than one layer, try to keep it relative to your content so you're certain that you're tweaking with the right one. It saves you a lot of hardship remembering the position of each one if it hasn't been written down. Since I cannot decide on a name, I will simply name the layer "TopStory".

  If you're already familiar with CSS, you might recognize the "class" part. Here is where the CSS aspect is broken down.

Absolute positioning will start the layer at the top left corner of your window. No, not the entire screen, but rather the window you view your websites within Internet Explorer. Let's say the coordinates were.... 500 left, 15 top. Here is what it would look like:





    Relative positioning starts from wherever you initially define your tag. Let's say "TopStory" is on the bottom left hand side of the screen and your left is set at 389, and your top is set at 163. Wherever your tag is set, is where the coordinates will be calculated. In other words, if this was absolute positioning, where the tag starts will act as your "top left corner of the window

This sets the width of the layer. It is similar to setting the width of the table. Let's use the above layer example and assume the width of your layer is, oh, 200. <<final.jpg>> Now, let's set the layer width at 400! <<width400.jpg>> See the difference? Yes, this function works the same as a table.

This is pretty much the same as the "width". If modate the amount of text. In some cases, for example the scrolling DHTML, the layer does not stretch to accommodate the amount of text.

This looks kind of important, right? Of course it is! Providing you have 100 layers. Now picture a pile of 10 books. The book at the very bottom would have a z-index of 1. The book at the very top would have a z-index of 10. The z-index works on the z axis. You have axis x, which is left to right. You have axis y which is up and down. Now you have the zaxis which makes it 3 dimensional. The z-index is important because without the z-index defined properly, the layers would sort of be extremely... well... Try picturing 10 books trying to squish into the same spot. It doesn't work.
z-index tells the books to pile on top of each other, much the same way it would tell the layers who goes on top of who.

Here is an example (we'll use the advertisements on the left): The z-index for the flower shop ad is 3. The z-index for the "TopStory" layer is 2. Let's set the left of the TopStory layer at 10, and the top at 10 as well. This is what it would look like <<zindex1.jpg>>. Now, let's change the z-index of TopStory to 4

This tells the layer and all of its contents how many pixels from the left of the frame it should be. Remember, if the layer positioning is set to absolute, it will start this from the top left corner of the frame, or the layer (assuming it is a layer within a layer). If it is set to relative, it will start from the top left corner of wherever you defined the tag (in the middle of the page, on the far right corner of the page, etc)

This tells the layer and all of its contents how many pixels from the top of the frame it should be. Once again, remember that if the layer positioning is absolute, it will start from the top left corner of the frame (or layer), and if it is set to relative, it will start from the top of "wherever" it is being defined.

This is pretty self-explanatory. Within the opening and closing tags go your contents (whatever you want within the layer). Text, images, tables, another layer...

</div>Of course, the standard closing tag. This closes off the layer, and goes right after your blurb of html or what-have-you.

  Now, of course your page won't look exactly like <<final.jpg>>, however, this is to show you a step by step view on layers. My example utilizes two layers overlapping an image doodled in Photoshop.

 Oh, one other thing you should remember... Just because the layering looks good on your resolution (I'm using 800x600), does not necessarily mean it will look good on higher or lower resolutions. For exa the coordinates of whatever you have set it at however on a higher resolution your table will be centered which could end up a few hundred pixels off.

 "Success! I am now the CSS master!" Not quite yet, grasshopper. You still have much to learn.  Now that you understand the major aspects of layering and positioning, they aren't at all as tedious as you've made them out to seem. hen hovering, and so forth. Just make sure to properly id your layers so it is less confusing when you edit them in the future.

"But... It's so boring" you mutter, "What can I do to improve it?"

Now, here are where different tutorials come in handy. First off, I highly recommend learning how to utilize the different properties, such as borders and link effects. Borders are good for trendy looking images, advertisements, tables, and so on; link effects for your... well... links. Not only will this improve the "cool-factor" of your website to other people, but it will also make certain things stand out, much the same way those glasses or hair colour makes your eyes stand out.