Div Layer Tutorial (Beginner)

HTML Tutorials

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.

<!-- 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:

<!-- 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.


<!-- 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:


<!-- 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 -->

Tutorial Comments

Showing latest 10 of 67 comments

I HEART YOU.

By tundraxeclipse on Jul 9, 2011 6:56 pm

thanks

By CuntBlog on Dec 24, 2009 12:46 pm

that didnt help at all ;~;

By PandaShiori on Sep 13, 2009 4:15 pm

i love this, it helps

By TyleRoss on Jul 29, 2009 3:31 pm

Can someone tell me how to put one of these on my myspace! Or do it for me!?!?

By induced23euphoria on Jun 6, 2009 12:37 am

thanks this helped so much i completely had forgotten how to use divs now this has helped me to get back on track for layouts. thanks again

By innerdemon25 on Mar 19, 2009 12:01 pm

what about the friendID thing what do i put in their?

By mitchellbrokearm13 on Feb 18, 2009 2:10 pm

omg! THANK YOU!!

By creatingripples on Feb 4, 2009 2:06 pm

I still dont undrestand can someone help me!!!!!

By daisy95 on Jan 3, 2009 3:00 pm

ah you are wonderful

By vamprock on Nov 26, 2008 12:33 pm
View all »

Tutorial Details

Author Godsend View profile
Submitted on Feb 13, 2006
Page views 132,133
Favorites 304
Comments 67

Tutorial Tags