Introduction
Still we have only discussed that how to change the forms and controls look on
webpage but we can also use CSS to change the layouts of the page; we can use
themes to control page layouts.
The example given below has <div> tags. By default, if we open the page the
contents of the <div> tags are stacked one on top of another.
Default.aspx File Code
<%@
Page Language="VB"
AutoEventWireup="false"
CodeFile="Default.aspx.vb"
Inherits="_Default"
%>
<!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
runat="server">
<title></title>
</head>
<body>
<form
id="form1"
runat="server">
<div
id="div1">
First div content
<br
/>First div content
<br
/>First div content
<br
/>First div content
<br
/>First div content
</div>
<div
id="div2">
Second div content
<br
/>Second div content
<br
/>Second div content
<br
/>Second div content
<br
/>Second div content
</div>
<div
id="div3">
Third div content
<br
/>Third div content
<br
/>Third div content
<br
/>Third div content
<br
/>Third div content
</div>
</form>
</body>
</html>
Now if we run the above file it will look like
![CSS1.gif]()
Every <div> tags are stacked together that is by default but we have also option
to guide all <div> as per choice. We can make it possible using CSS to Themes.
The code given below is CSS which will control the look of <div> tags.
App_Themes\Page_Layouts\Page_Layouts.css File Code
html
{
background-color:Silver;
font:14px
Arial,Sans-Serif;
}
#div1
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
#div2
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
#div3
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
One more thing is to add Theme="Page_Layouts" in the content page to look as
given below
![CSS2.gif]()
Now if we create out CSS file as given below.
App_Themes\Page_Layouts_2\Page_Layouts_2.css File Code
html
{
background-color:Silver;
font:14px
Arial,Sans-Serif;
}
#div3
{
position:absolute;
left:15px;
top:15px;
width:200px;
padding:10px;
background-color:White;
}
#div2
{
position:absolute;
left:250px;
top:65px;
width:200px;
padding:10px;
background-color:White;
}
#div1
{
position:absolute;
left:485px;
top:115px;
width:200px;
padding:10px;
background-color:White;
}
Now this CSS will show the same page as given below:
![CSS3.gif]()
So, now we have very-very constant control over appearance of every control,
tags on webpage. Remember if we don't use CSS for such work then our page will
not look so good on every browser. I mean to look same on each and every web
browser we have to use lot CSS based controls.
Note: This last part of this article series.
HAVE A GREAT CODING!