Welcome to the new How To Gurus Blog

Where you can always find my latest Demos and YouTube Videos. You will find samples taken from my Training DVDs and also exclusive videos created specifically for my online audience.

Friday, December 5, 2008

On Using DIV tag layers

"What my instructor had me do for that graphic placement issue in DW was just create a new CSS rule and create a DIV tag called #wrapper. Then I just positioned the graphic where I wanted it."

Response:


Using a DIV tag (creating a floating layer) works fine. If you follow my previous email you will see that the layer will be positioned above the background image, so that any image you place into the layer will appear on top of the background image.
The CSS rule is so that you can easily update the layer formatting in the future and the #wrapper is just a label for the layer (DIV tag). You can call the layer anything you want, if you don't name the layer then Dreamweaver will simply apply a number to the layer. The label allows you to easily find the coding for the layer and also allows you to refer to the layer in your code (for instance if you want to make a button that will hide or show the layer you would need a label for it). Personally I would have picked a name that exactly matched the image contents, so if the layer contained my logo I would call it something like this: #_logo_layer (the _ symbol is just being used as a spacer to make the name easier to read, you can't use spaces in label names so the _ character is a good alternative, I could also have used - but I prefer the underscore like this _ ).
If you look at the coding for the DIV tag (near the top of your code) you will first see the wrapper section (following the name that you gave the DIV tag), you will also see the x and y positions (measured from the top left corner of the page), whether the layer is relative or absolute (if it floats or is locked into a specific position relative to the upper left corner of the page) and you will also see a number for z-index. The z-index is the stacking order of the layer on the page. The larger the number the higher up in the stack the layer will be (like a deck of cards). Most likely your layer is showing a z-index of either 0 or 1. As you create more layers on the page Dreamweaver will give them a new z-index position above the previous layer. So if your original layer was z-index=1 then the next layer will be z-index=2. If you need to rearrange the order that the layers are on the page simply adjust the z-index number. Again think of the layers like a deck of cards numbered 1 at the bottom of the deck, changing the number on the card will change its position in the deck.
George