.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Div and Web Design.

Posted By:Nikhil Kumar       Posted Date: August 27, 2010    Points: 25    Category: ASP.NET    URL: http://www.dotnetspark.com  

If you develop web applications then surely you know about the Div
tag but many of you guys never have a usuful look on it. As i know div tag is the backbone of a consistent css used website. Basically div is a section you can say which separate the sections in a webpage. But div not only separate the contents but it also provides the different formating for each section.
 

Div and Web Design.

Introduction


If you develop web applications then surely you know about the Div

tag but many of you guys never have a usuful look on it. As i know div tag is the backbone of a consistent css used website.

Basically div is a section you can say which separate the sections in a webpage. But div not only separate the contents but it also provides the different formating for each section.

If you are using Cascading Style Sheet for formating your website then you can use these css by including its id in div tag. Every div tag contains a unique attribute name for id. Div make the webpage design sections like if you are using css for creating a side menu list then you can define a div as the setting its properties to left or right, that means by using div tag you can group the large html contents.

From my side: I like the div tag because it separte my web page contents which are handy to format and looks always cool.


Now we will talk about the attributes of div tag

 

As we discussed in the intro, that div tag contains an id attribute.

ID:

        ID attribute always contains a unique name as the name suggests id.
Eg:  

        <div id="content" align="left" bgcolor="white">
            
Content goes here.
     

 Explanation

Here you can see that we used properties like aligh and bgcolor so here we have formated this div tag means a separate section not the full webpage.

 ID For CSS:

              If you are creating a CSS like then you can use ID attribute for div tag. Like if you require to create many headings for your webpage with different styles then, a single style will not enough.

  CSS:

      body

{
      background-color:Silver;
}

 div#head1
{
      background-color:Maroon;
      font-family:Comic Sans MS;
      font-size:medium;
}
div#head2
{
      background-color:Blue;
      font-family:Book Antiqua;
      font-size:medium;
}


Now you can use these in your aspx page. Like.

.aspx:

        <div id="head1">
                This is heading one.
              div>
              <
div id="head2">
                This is heading two.
              div>

ALIGN:

      As we have used this property in our previous example.

But even take an example of google.com notice that there are some links on the right top when you resize the page they even appear in that resized window.

 Different alignments are:

  left:
  center:
  right:
  justify:

 
Example:

         <div id="menu" align="right" >
                    <
a href="login.aspx">Logina> |
                    <
a href="register.aspx">Registera>
                div>

 Output goes like this.

                                                   div1.JPG

 
Just notice the red box there are two links which we have created before when you resize your window as it is already these links will also resize to be visible in the webpage.

 STYLE:

As the name suggests style tag is used to format the div tag.
Like setting it's background color, font etc.

 Example :

<div id="content" style="border: 3px inset Red; background-color:Silver; ">
<
h3>Contenth3>
<
p>This is a formated div tag by using its style attribute.
you can define anything here like controls or which you want in your webpage.p>
div>

Here the part of code which you have to notice is underlined.
First we use style then its properties like background-color:silver etc.
When you type a keyword then AI will open to help you ahead.JUST TRY.

 OutPut:

 div2.JPG

DIR

          Specifies the text direction for the content in an element.

rtl: for right side.
ltr : for left side.

 Example:

             <div dir="rtl">
                This is a example of dir attribute of div.
            div>

 Try this line of code, and this line will appear in the right side of the web page.

TITLE:

       Title tag is used to give the more information to the div tag 
       In the browser, you can say it a tooltip for another controls.

Example:

          <div dir="rtl" title="this is right side">

 

                  
LANG:

       Simply specifies a language code for the content in an element.
When you type lang= in the div tag a list will appear in AI.

 Example:

            div3.JPG

Choose  the language code for which you want for your content.

CLASS:

                This div attribute is very attrative, I like to work with this.
Okay, if you have craeted a text/css in your page  then you give the reference this desing by using class attribute.
See.

        <style type="text/css">
    .heading
{
      font-family:Bookman Old Style;
      font-size:medium;
      font-style:oblique;
      background-color:Gray;
}
    style>

 You have created css in your .aspx page and now you can use this by using class attribute of div.

 Example:

                  <div class="heading">
                This is a heading.
            div>

Now we have done the attributes part of div.
Okay now you should take a small rest with a hot coffee
J.

Events:

Now we are going to talk about events of div.

Okay, first of all here is a list of events.

    * ONCLICK,    -When the mouse button is clicked on an element of a

                   web page.

    * ONDBLCLICK  -When the mouse button is double-clicked on an  

                   element of a web page.

    * ONMOUSEDOWN -When the mouse button is pressed over an element of  

                   a web page.

    * ONMOUSEUP   -When the mouse button is released over an element of

                   a web page.

    * ONMOUSEOVER   -When the mouse is moved onto an element of a web

                     Page.

    * ONMOUSEMOVE   -When the mouse is moved while over an element of a

                     web page.

    * ONMOUSEOUT    -When the mouse is moved away from an element of a

                     web page

    * ONKEYPRESS    -When a key is pressed and released over an element

                     of a web page.

     * ONKEYDOWN     -When a key is pressed down over an element of a

                     web page.

     * ONKEYUP       -When a key is released over an element of a web

                     page.

If you need any help feel free to ask.

 CONTINUE...next par.

Cheers !

 -Nikhil Kumar


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend