Master Pages and CSS

emozley · Jun 18, 2012

Hi,

I am trying to get a very basic page that uses a master page up and running. I have got some CSS that divides the screen up into a header, left, right and footer section and the header section has an include which has a logo and shows the day and date.

The thing I don't really understand is how I use the page master. If the divs have already been set up then do I still need to add them again on my non master page?

Here is my code so far. So just to clarify... what I am trying to do is have the default.aspx load and then for the text Hello World to appear in the area defined by the right div.

MasterPage.Master

Code:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="dotnet_masterpages_MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head runat="server">
    <title></title>
    <link href="../../styles.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    
    <div id="header">
    <!--#include virtual="/dotnet/banner.aspx"-->
    </div>
    <div id="wrapper">
      <div id="left"></div>
      <div id="right"></div>
    </div>
    <div id="footer">
    </div>
    
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Default.aspx

Code:

<%@ Page Title="" Language="VB" MasterPageFile="~/dotnet/masterpages/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="dotnet_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>

styles.css

Code:

*{margin:0px;padding:0px;overflow:hidden}
body{top:0xp;left:0px;}
div{position:absolute;}   
div#header{top:0px;left:0px;right:0px;height:61px;border-bottom:1px dotted gray;} 
div#wrapper{top:62px;left:0px;right:0px;bottom:30px;}  
div#right{top:0px;bottom:0px;left:17%;width:83%;overflow-y:auto;} 
div#left{top:0px;bottom:0px;left:0px;width:17%;overflow-y:auto;background-color:#E6E6E6;}
div#footer{bottom:-1px;left:0px;width:100%;overflow:hidden;height:30px;border-top:1px gray dotted;background-color:#BDBDBD;}

Thanks very much

Ed

jbenson001 · Jun 18, 2012

The thing I don't really understand is how I use the page master. If the divs have already been set up then do I still need to add them again on my non master page?

The master page is where you put the structure you want to display on every page. It looks like you have done this. Within that, you add content place holder which is what the pages that inherit from your master page will use to display their content. So no, you don't add the divs again.

MarkXaml · Jun 18, 2012

You're on the right path. The placeholders will be replaced with the cooresponding placeholders in the page. If your Left and Right panels will be different on each page, you'll need a contentplaceholder inside each of the divs.

Code:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="dotnet_masterpages_MasterPage" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL] 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL] 
<head runat="server"> 
	<title></title> 
	<link href="../../styles.css" rel="stylesheet" type="text/css" /> 
	<!--The following tag will be replaced with whatever is in the head in your page-->
	<asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> 
</head> 
	<body> 
		<form id="form1" runat="server"> 
			<div id="header"> 
			<!--#include virtual="/dotnet/banner.aspx"--> 
			</div> 
			<div id="wrapper"> 
				<div id="left">
					<!--The following tag will be replaced with whatever is in the ContentPlaceHolderLeft in your page-->
					<asp:ContentPlaceHolder id="ContentPlaceHolderLeft" runat="server"> </asp:ContentPlaceHolder>
				</div> 
				<div id="right">
					<!--The following tag will be replaced with whatever is in the ContentPlaceHolderRight in your page-->
					<asp:ContentPlaceHolder id="ContentPlaceHolderRight" runat="server"> </asp:ContentPlaceHolder>
				</div> 
			</div> 
			<div id="footer"> </div> 
			<div> 
				 
			</div> 
		</form> 
	</body> 
</html>

and then your page that uses that masterpage will look something like this:

Code:

<%@ Page Title="" Language="VB" MasterPageFile="~/dotnet/masterpages/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="dotnet_Default" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderLeft" runat="server">
    <asp:Label ID="Label1" runat="server" Text="Hello World"></asp:Label>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolderRight" runat="server">
</asp:Content>

Good luck!

-Mark

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Master Pages and CSS

emozley

Technical User

jbenson001

Programmer

MarkXaml

Programmer

Similar threads

Part and Inventory Search

Sponsor