ASP

Open your VS 2008 and create a new Website and name it as DIVLayoutSample.
Create a layout to your default page using TABLE tag with a header, footer, left, right and content in the center of the page as
shown below in between form tag:
Now, we will implement the same layout using DIV tags. Remove above markup and add this DIV markup as shown below:
Firstly, lot of markup got reduced. Secondly, it's easy to add/modify existing page layout. Page will also get loaded very fast,
because of fewer markups and less load on browser for loading the page. It works very well on low bandwidth networks.
We can still reduce the code by replacing the position, top and left attributes with float attribute as shown below:
float attribute makes a DIV to float left/right direction. clear attribute clears previously specified float attributes. By using
stylesheets, we can split HTML markup (DIV tag) and design (separate stylesheet) into different files. So, by using DIV tag we
can reduce markup, load page faster and works well at different resolutions and network bandwidths. So, start using DIV
elements for your page layouts and experience the benefits of it.
Here is a list of the style sheet classes I have created for the page layout. Let’s get into more detail.
 divHeaderTable: Class assigned to header of the html page and its works as headertable
 divHeaderRow: Class assigned to the div element which works as header row of table. As height of
header image is fix to 105 row having height element value 105px.
 divHeaderColumn: Class assigned to div element which works as header column of the table. As
header part is divided in three part the width element having value 99%.
 divTable: Class assigned to the div element woks as the table in container part of html document.
 divRow: Class assigned to the div element woks as the row in container part of html document.
 divColumn: Class assigned to the div element woks as the table in container part of html
document. As container form element are 4 per row the width element having value 24%.
-----------------------------------------------------------------------------------------------------------------
body
{
background-color: LightBlue;
font-family: Verdana;
font-size: 13px;
}
.divHeaderTable
{
width: 100%;
padding-bottom:5px;
display:block;
}
.divHeaderRow
{
width: 100%; /* add extra that you want to for header column */
display:block;
height:105px;
}
.divHeaderColumn
{
float: left;
width: 33%;
display:block;
}
.divTable
{
width: 100%;
display:block;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
}
.divRow
{
width: 99%;
display:block;
padding-bottom:5px;
}
.divColumn
{
float: left;
width: 24%;
display:block;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gmind Solusion-DivElement Layout</title>
<link href="CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div style="width:99%; height:565px;">

<div class="divHeaderTable">
<div class="divHeaderRow">
<div class="divHeaderColumn">
<img alt="Offshore Outsourcing software development company India"
title="Offshore Outsourcing software development company India"
src="Images/gmind.png" width="100%" height="105" />
</div>
</div>
<div>
<img alt="Gmind" width="15" height="10"
src="Images/smllindia.jpg" />
+91-9702989270
</div>
<div>
<img alt="Gmind" src="Images/smallusa.jpg" />
+91-9924839208
</div>
<div>
</div>
<div>
</div>
</div>
</div>
</div>
<div id="menu" class="divHeaderTable" >

<ul style="list-style-type:none;" >
<li style="float:left"><a href="javascript:void(0);" >Home</a> </li>
<li style="float:left"><a href="javascript:void(0);" >About Us</a>
</li>
<li style="float:left"><a href="javascript:void(0);" >Services</a>
</li>
<li style="float:left"><a href="javascript:void(0);" >Technology</a>
</li>
<li style="float:left"><a href="javascript:void(0);" >Outsourcing</a>
</li>
<li style="float:left"><a href="javascript:void(0);" >Quality</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Career</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Blogs</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Partner</a> </li>
<li><a href="javascript:void(0);" title="Contact Us">Contact Us</a>
</li>
</ul>
</div>
<div id="divHeader" class="divHeaderTable">

<h4>User Registration</h4>
</div>
<div id="content" class="divTable">

<div class="divRow">
<div class="divColumn">
<div>
<label id="lblSolutation" > Solutation</label>
</div>
<div>
<input type="text" id="txtSolutation" />
</div>
</div>
<div>
<label id="lblFname" > First Name</label>
</div>
<div>
<input type="text" id="Text1" />
</div>
</div>
<div>
<label id="lblMname" > Middle Name</label>
</div>
<div>
</div>
</div>
<div>
<label id="lblLname" > Last Name</label>
</div>
<div>
</div>
</div>
</div>
<div>
<label id="Label10" > Login Name</label>
</div>
<div>
</div>
</div>
<div>
<label id="Label9" > E-mail</label>
</div>
<div>
</div>
</div>
<div>
<label id="Label7" > Password</label>
</div>
<div>
<input type="password" id="Text10" />
</div>
</div>
<div>
<label id="Label8" > Confirm Password</label>
</div>
<div>
<input type="password" id="Text11" />
</div>
</div>
</div>
<div class="divColumn" style="width:48%;">
<div>
<label id="Label1" > Address1</label>
</div>
<div>
<textarea id="Text4" style="width:80%;" ></textarea>
</div>
</div>
<div class="divColumn" style="width:48%;">
<div>
<label id="Label3" > Address2</label>
</div>
<div>
<textarea id="Text6" style="width:80%;"> </textarea>
</div>
</div>
</div>
<div>
<label id="Label2" > State</label>
</div>
<div>
</div>
</div>
<div>
<label id="Label4" > City</label>
</div>
<div>
</div>
</div>
<div>
<label id="Label5" > Country</label>
</div>
<div>
</div>
</div>
<div>
<label id="Label6" > Pin Code</label>
</div>
<div>
</div>
</div>
</div>
<br />
<input type="submit" value="Submit" onclick="javascript:void(0);" />
or
<a href="javascript:void(0)">Cancel </a>
</div>
</div>
</div>
<div style="text-align:center; background-color:Green;">
Contact us to discuss your requirements
</div>
</body>
</html>

ASP

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

ASP

Загружено:

Авторское право:

Доступные форматы

Open your VS 2008 and create a new Website and name it as DIVLayoutSample.

<div style="width:99%; height:565px;">

<div id="menu" class="divHeaderTable" >

<div id="divHeader" class="divHeaderTable">

<div id="content" class="divTable">

Вам также может понравиться