SQL PHP HTML ASP JavaScript articles and free scripts to download
HTML

Integrating id align class to Div Tag

Div tag is widely used as layout tool in web pages. We can divide different areas of web page using div tags. When used with JavaScript this became a powerful tool for creating dynamic content or style in a webpage. Here we will try to understand the basics of div tag.

Using div tag we can control a particular area or a block of code and text within it. Here is a simple structure of div tag.

<div id="my_area">
My text here
</div>

You can see we have defined the are within the div tag with id=my_area , this is useful for us to further manage the area using DHTML. We will learn them in our next tutorial. Now we will learn different attributes with examples.

Attributes Align: Values : left, right, center, justify
We can set the align attribute to different values and manage the text within the div tag area.

Here is the DEMO of align attribute

class

We can integrate our existing style sheet and define a class for the div tag. Here is the code to integrate an existing class to the div tag

<div id="my_area" class="data">
This is a right aligned text2
</div>

Title

Now let us try to add one title to this div tag. On mouse over the div area title text will be displayed like alt tag of images. Here is the code

<div id="my_area" class="data" title="This is a test for title on Div tag">
This is a right aligned text2
</div>


To see the example place your mouse over this line

ID

This is document wide identifier for the div. This is highly used in DHTML ( using JavaScript ) to manage content and various display properties of the Div element.

<div id="info_box" >
This is some text
</div>

Style

We can assign inline style properties to our DIV box

<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; "> Inline style is used here </div>

In addition to this there are more attributes like onClick, ondblclick, onmouseover, onmouseout, onmousmove, onkeypress, onkeydown, onkeyup.

We will try to learn more on application of div tag in DHTML by placing mouse over it.

How to position a div tag


Number of User Comments : 1


Google+
krish05-07-2013
pls give us some more exaples

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



HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

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