Div Layer Tutorial (Beginner)

Tutorial

Click on thumbnailed images to enlarge

Note: This tutorial does not work on xanga. ONLY WEBSITES.

this is from my cousin omega and my friend from renegade-dds, a working preview is at my xanga in my signature although i intergrated it with css and div layering anyways here: with permission from the renegade-dds to put this:

DIV layers are important for positioning and holding content (images or HTML), unlike frames, which instead hold entire pages. They are very easy to learn and customize with style sheets.

<div id="LayerNameHere" style="position:absolute; width:#; height:#; z-index:#; left:#; top:#">CONTENT</div>

Replace "LayerNameHere" with any name you want. This helps keep all your layers organized. Enter the width and height of the layer accordingly. For left, enter how far from the left you want your DIV layer to be; for the top, enter how far from the top you want your DIV layer to be. The z-index is the order in which your layers are overlapped. So, layer 1 would be closest to the background. Layer 2 would be stacked on layer 1, etc. You can remove this tag (or put 0) if you are using layers you do not want to overlap. Replace CONTENT with your text / images.

For example, if you wanted it 100 pixels wide and 150 pixels high, 20 pixels from the top and 10 from the left, your code would be:

<div id="LayerNameHere" style="position:absolute; width:100; height:150; z-index:0; left:10; top:20">CONTENT</div>

DECORATING. Once you've gotten the hang of simple DIVs, it's easy to decorate them with colored borders, images, and scrollbars.

Add the following tag to make your DIV act like an iframe. This adds a scrollbar when your text extends past the designated width and height.

overflow: auto

Add one of the following tags for (a) a colored background or (b) a background image.

(a) background-color: ######

(b) layer-background-image:url(yourfilename.gif)

Add the following code to your DIV HTML for a border.

border-color: ######;
border-style: solid;
border-top-width: #px;
border-right-width: #px;
border-bottom-width: #px;
border-left-width: #px;

For example, if you want a black dashed border all the way around your div, with a gray background, here's what the complete code would look like:

<div id="LayerNameHere" style="position:absolute; width:100; height:150; z-index:0; left:10; top:20; background-color: D6D6D6; overflow: auto; border-color: 000000; border-style: dashed; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;">CONTENT</div>