What is Theme in ASP.NET, Web Forms, How to use Theme, Page Layouts using CSS in Web Forms: Part 9
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"
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">
<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>
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>
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>
Third div content
<br />Third div content
<br />Third div content
<br />Third div content
<br />Third div content
</div>
</form>
</body>
</html>
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;
}
</body>
</html>
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;
}
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
#div2
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
#div3
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
App_Themes\Page_Layouts_2\Page_Layouts_2.css File Code
html
{
background-color:Silver;
font:14px Arial,Sans-Serif;
}
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
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;
}
{
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;
}
{
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;
}
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.
{
position:absolute;
left:485px;
top:115px;
width:200px;
padding:10px;
background-color:White;
}
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.
Comments
Post a Comment