SQL PHP HTML ASP JavaScript articles and free scripts to download

How to position a div tag inside a page?

We can position a text block inside a web page by using div tag. We can specify its exact location or relative location of the block by setting some of the attributes of the div tag. If we are using more than one div element then we can identity them by using id and stack them one over the other by specifying the z-index of the tag.

This way we can place the div block over any place inside the page. We will learn here different attributes with some examples.

id:

This is the unique identification tag for the div element. We can apply many controls to the div block by using this id tag. In a page it is useful when we have more than one div tag. We will see its uses in our next examples.

Width:

This tells the width of the block.

Height:

This tells the height of the div block.

TOP:

This gives the position of the div block from the top border of the page in pixels. Top:0 mean the block is located 50 pixels down from the top border of the page.

LEFT:

This specifies the horizontal position of the div tag. Left:80 mean the div block located 80 pixels from the left border of the page.

Z-index:

This is to tell the browser which layer comes over which layer, by specifying this number to higher value we can say the layer with higher value comes over the layer with lower Z-index value. Using this we can stack layers one over the other. Padding: Like cellpadding of the table this keeps a distance from the edges of the div element. By specifying padding we can maintain a margin between text and border of the div element. We can say padding:20 , it mean the text inside the div tag will maintain a margin of 20 pixels from the borders of the div elements

Border:

We can add border to our div tag and specify its color size and style. Here is one example. border: #0000cc 2px dashed; We can write solid, dotted in place of dashed style specification. If we don't want we can remove this border property also.

position:

Relative position we can specify where the div element takes the position relative to its actual position ( or position without any value specified ) we can specify the position as absolute or relative

Here is code for a div tag

<div id='my_page2' style="z-index: 2; position: relative; right: 0px; top: 10px; background-color: #cccc33; width: 180px; padding: 10px; color: white; border: #0000cc 2px dashed; "> This is inside div tag text </div>

This is inside div tag text


Please rate this Article on one to five scale

Google+
sumant29-05-2011
very good tutorial
sun09-03-2013
excellent!

thank you.
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked



Join Our Email List
Email:  
For Email Newsletters you can trust
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer