div layer tutorial, not the "boxed one" Options

[Godsend]

know where i can to div layers, findin where i put the blog entry is hard! and how big should a wallpaper be for a skin? like 800x600? dont worry, i'ma use an image slicer. i need a div layering tutorial!

[omega]

cuz, maybe u should check the renegade-dds tutorial: . lolx

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.

CODE

<!-- begin code provided by createblog.com -->
<div id="LayerNameHere" style="position:absolute; width:#; height:#; z-index:#; left:#; top:#">CONTENT</div>
<!-- end code provided by createblog.com -->

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:

CODE

<!-- begin code provided by createblog.com -->
<div id="LayerNameHere" style="position:absolute; width:100; height:150; z-index:0; left:10; top:20">CONTENT</div>
<!-- end code provided by createblog.com -->

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.

CODE

<!-- begin code provided by createblog.com -->
overflow: auto
<!-- end code provided by createblog.com -->

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:

CODE

<!-- begin code provided by createblog.com -->
<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>
<!-- end code provided by createblog.com -->

[Godsend]

cuz, maybe u should check the renegade-dds tutorial: . lolx

eh? where's the renegade-dds? is tha emerge's syte?

okay now answer my other question, what width/height should the bg pic be?

This post has been edited by T.K.O.: Jun 5 2004, 11:16 PM

[omega]

no that's rika's

and i dont know what the width and height should b, i dont know ur screen resolution

[Godsend]

nevamind lookie at my xanga. :P anyway cuz, why dont u post ur tutorial in the xanga scripts?

[tropical_fruitju...]

hi i was wondering by using this code:

<!-- begin code provided by createblog.com -->
<div id="LayerNameHere" style="position:absolute; width:#; height:#; z-index:#; left:#; top:#">CONTENT</div>
<!-- end code provided by createblog.com -->

can you move the calendar at the bottom right of my xanga (www.xanga.com/fareast2006) so that the calendar is right below my chatter box?

thanks