Integrating id align class to Div Tag

The <div> tag is a block-level container in HTML used for grouping elements, without inherent meaning or styling. It's versatile for layouts, styling, and JavaScript manipulation, starting on a new line and taking full width by default.
When used with JavaScript this became a powerful tool for creating dynamic content or style in a webpage.

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.


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 Mouseover of link showing message box

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    krish

    05-07-2013

    pls give us some more exaples
    Sendyona daniel

    31-05-2016

    how can i fit well the length of the menu from the extreme end to the extreme end of the compter monitor and to fit on all screens
    chethan

    03-03-2017

    provided information is good one and easy to understand

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer