Post
Ask Question

Developing Websites using Themes (Page Layouts using CSS): 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" 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!


Similar Articles