Ehsan Tavakoli

Writing About .NET Programming and other stuff

Archive for the ‘css. div’ Category

Using MasterPage and Tableless design ASP.NET

with 3 comments

              
Hey again, in this post I’m going to show how easily we can use a tableless design (with div and CSS) with MasterPage in ASP.NET 3.5. The trick is that we need nested master pages.

1. For start, we need a tableless design. We can get free designs from: http://www.oswd.org
I chose a template called Grapes: http://www.oswd.org/design/preview/id/3567 it’s awesome! You can download it as well.

First, you need to copy the css file and images folder into your project. Then we need 3 different Masterpages to implement what we need. We assume that we need a dynamic menu and dynamic content.

Here is our template code: (it’s plain HTML with CSS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Grapes</title>
<link rel="stylesheet" type="text/css" href="grapes.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Your name here" />
<meta name="Copyright" content="Copyright (c) Your copyright here 2005" />
</head>
<body>
<div id="container">
<div id="hdr">
<h1>grapes</h1>
<p id="tagline">fruit, wine &amp; web design</p>
</div>

<div id="lftcol">
 <ul id="nav">
  <li><a href="" id="current">Introduction</a></li>
  <li><a href="">Our Wines</a></li>
  <li><a href="">Important Grapes</a></li>
  <li><a href="">Contact Us</a></li>
  <li><a href="">Links</a></li>
 </ul>

<div id="quote">
<p><em>A great source for information...</em></p>
</div>
 
<h3>More stuff</h3>
 <ul>
  <li><a href="http://validator.w3.org/check?uri=referer">Validate XHTML</a></li>
  <li><a href="http://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a></li>
  <li><a href="http://www.davereederdesign.com/">Authors Website</a></li>
  <li><a href="http://www.oswd.org/">OSWD</a></li>  
 </ul>

</div>



<div id="rgtcol">
<h2>Introduction</h2>
<p>Hello and welcome to my latest template called &quot;Grapes&quot;.  
<br /> 
&quot;Grapes&quot; is an Open Source web template which means it can be used without the need to ask permission and you have full rights to use and adapt its images.  For more of my work, please see my website which can be found  <a href="http://www.davereederdesign.com/">here.</a>
</p>
<p>
I wanted to create a fairly simple yet attractive template which can be used for food or wine related websites, although it can easily be adapted for other uses too. 
</p>


<h2>But is it <em>easy</em> to Use?</h2>
<p>&quot;Grapes&quot; should be quite easy to use as I have added plenty of comments and tried to make the <acronym title="Cascading Style Sheet">CSS</acronym> as neat and organised as possible. 
</p>
<p>There are also plenty of styles for other tags, including:</p>

<p><code>Text using the code tag, this is ideal for showing code on a page.</code></p>

<p><acronym title="acronym text">acronym text</acronym></p>

<p><strong>strong or bold text</strong></p>

<p><em>em or italic text</em></p>

<p>This is a paragraph of normal text that contains <span>span</span> tags with a class set to <span>special</span>.  This means all the <span>big words</span> in this paragraph are words that are placed between opening and closing <span>span</span> tags.  These span tags can be used to add meaning to a block of text or to <span>shout out</span> when needed.</p>
</div>

<div id="bttmbar">Copyright &copy; Your Copyright Info</div>


</div>

</body>
</html>

Second, HeaderMasterPage.master

<%@ Master Language="C#" MasterPageFile="~/MainMasterPage.master" AutoEventWireup="true" CodeFile="HeaderMasterPage.master.cs" Inherits="MasterPage1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <div id="hdr">
            <h1>
                grapes</h1>
            <p id="tagline">
                fruit, wine & web design</p>
        </div>


            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
            </asp:ContentPlaceHolder>
     
</asp:Content>

and Third, MenuMasterPage.master

<%@ Master Language="C#" MasterPageFile="~/HeaderMasterPage.master" AutoEventWireup="true" CodeFile="MenuMasterPage.master.cs" Inherits="MasterPage2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <div id="lftcol">
<ul id="nav">
<li><a href="" id="current">Introduction</a></li>
<li><a href="">Our Wines</a></li>
<li><a href="">Important Grapes</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Links</a></li>
</ul>

<div id="quote">
<p><em>A great source for information...</em></p>
</div>

<h3>More stuff</h3>
<ul>
<li><a href="http://validator.w3.org/check?uri=referer">Validate XHTML</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a></li>
<li><a href="http://www.davereederdesign.com/">Authors Website</a></li>
<li><a href="http://www.oswd.org/">OSWD</a></li>
</ul>

</div>



<div id="rgtcol">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
            </asp:ContentPlaceHolder>
</div>
</asp:Content>

now, we can use MenuMasterPage.master in our ASPX file

Here is a sample default.aspx file:

<%@ Page Title="" Language="C#" MasterPageFile="~/MenuMasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">
<h2>Introduction</h2>
<p>Hello and welcome to my latest template called "Grapes".
<br />
"Grapes" is an Open Source web template which means it can be used without the need to ask permission and you have full rights to use and adapt its images.  For more of my work, please see my website which can be found  <a href="http://www.davereederdesign.com/">here.</a>
</p>
<p>
I wanted to create a fairly simple yet attractive template which can be used for food or wine related websites, although it can easily be adapted for other uses too.
</p>


<h2>But is it <em>easy</em> to Use?</h2>
<p>"Grapes" should be quite easy to use as I have added plenty of comments and tried to make the <acronym title="Cascading Style Sheet">CSS</acronym> as neat and organised as possible.
</p>
<p>There are also plenty of styles for other tags, including:</p>

<p><code>Text using the code tag, this is ideal for showing code on a page.</code></p>

<p><acronym title="acronym text">acronym text</acronym></p>

<p><strong>strong or bold text</strong></p>

<p><em>em or italic text</em></p>

<p>This is a paragraph of normal text that contains <span>span</span> tags with a class set to <span>special</span>.  This means all the <span>big words</span> in this paragraph are words that are placed between opening and closing <span>span</span> tags.  These span tags can be used to add meaning to a block of text or to <span>shout out</span> when needed.</p>
</asp:Content>

Look at the final screenshot:

Advertisements

Written by Ehsan Tavakoli

February 17, 2010 at 2:00 am