Div and Web Design.

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:

<divid="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:ComicSansMS;

font-size:medium;

}

div#head2

{

background-color:Blue;

font-family:BookAntiqua;

font-size:medium;

}

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

.aspx:

<divid="head1">

This is heading one.

div>

<divid="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:

<divid="menu"align="right">

<ahref="login.aspx">Logina> |

<ahref="register.aspx">Registera>

div>

Output goes
like this.

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.