Master page content not displaying correctly

.NET
1

I am using Build Your Own Asp.NET 4 Website and am following the directions to create a master page for the Dorknozzle project. I have checked over the code and made sure I copied it exactly from pages 207-209. But when I run the page the Content always appears below the Menu instead of in the main part of the page to the right the menu. Am I supposed to be putting it in a table? The book doesn’t say to do this.

2

Can you post the aspx markup for us to see of your master page and any related content pages?

3

default.aspx file is:

<%@ Page Language=“VB” MasterPageFile=“~/Dorknozzle.master” AutoEventWireup=“false” CodeFile=“Default.aspx.vb” Inherits=“_Default” title =“Welcome to Dorknozzle!”%>

<asp:Content ID=“Content1” ContentPlaceHolderID=“head” Runat=“Server”>
</asp:Content>
<asp:Content ID=“Content2”
ContentPlaceHolderID=“ContentPlaceHolder1” Runat=“Server”>
<h1>Company News</h1>
<p>We’ll add some news later.</p>
<h1>Company Events</h1>
<p>We’ll add some events later.</p>
</asp:Content>

Master page file is:

<%@ Master Language=“VB” CodeFile=“Dorknozzle.master.vb” Inherits=“Dorknozzle” %>

<!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>
<asp:ContentPlaceHolder id=“head” runat=“server”>
</asp:ContentPlaceHolder>
<link href=“site.css” rel=“stylesheet” type=“text/css” />
</head>

<body>
<form id=“form1” runat=“server”>
<!–Header –>
<div id = “Header”>
<asp:Image ID = “Image1” runat=“server”
ImageUrl=“~/Images/header.gif” Width=“450” Height=“174”
AlternateText=“The Official Dorknozzle Company Intranet” />
</div>

&lt;!--Menu--&gt;
&lt;div id = "Menu"&gt;
&lt;asp:SiteMapDataSource ID= "dorknozzleSiteMap" runat ="server" ShowStartingNode= "false"  /&gt;
&lt;asp:Menu id= "dorknozzleMenu" runat = "server" DataSourceID = "dorknozzleSiteMap"&gt;
&lt;StaticItemTemplate &gt;
&lt;img src= "Images/book_closed.gif" alt = "+"  width = "16" height ="16" style= "border-width: 0;" /&gt;
&lt;%# Eval("Text")%&gt;

&lt;/StaticItemTemplate&gt;
&lt;/asp:Menu&gt;
&lt;/div&gt;
&lt;!--Content--&gt;
&lt;div id= "Content"&gt;
    &lt;asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" /&gt;

&lt;/div&gt;
&lt;/form&gt;

</body>
</html>

4

Okay, your code looks fine, maybe check your stylesheet. Usually you can either float the menu and content to the left and right respectively, did you miss a step like that?

5

The example in the book didn’t use the style sheet. I tried floating the content to the right and it wasn’t lined up right that way either. It ended up looking being way over to the right

ATTACH=CONFIG]60660[/ATTACH]

6

Can you post the stylesheet provided by the book? I’d like to take a look at it to see if I notice anything obvious, or at least can make a recommendation on how to change it so it floats properly

7

This is the original style sheet as the book has it. When I use this, the content part appears directly below the menu.

body
{
font-family: Tahoma , Helvetica, Arial, Sans-Serif;
font-size : 12px;
}
h1
{
font-size : 25 px;
}
a:link, a:visited
{
text-decoration:none;
color : Blue ;
}
a:hover
{
color : Red ;
}
.Header
{
top: 0px;
left:0px;
position: absolute ;
width: 800px;
background-image: url(…/…/Images/header_bg.gif);
background-repeat: repeat-x;
}
.Menu
{ top: 160px;
left: 15px;
width: 195 px;
position: absolute;
}
.Content
{
top: 160px;
left: 170 px;
position: absolute ;
width: 600px;
}

8

Okay, I see the issue and there are two ways of resolving it. First the stylsheet is using class attributes for defining the styles instead of id attributes. Class attributes are indicated with a ‘.’ and id attributes are indicated with a ‘#’.

So the first solution would be to change .Menu to #Menu, .Content to Content, and .Header to #Header

The second solution (if you wish to NOT change the CSS), is to add class attributes to the following lines

Header:

<div id = "Header">

Would become

<div id = "Header" class="Header">

Menu:

<div id = "Menu">

Would become

<div id = "Menu" class="Menu">

Content:

<div id = "Content">

Would become

<div id = "Content" class="Content">
9

Thank you. I tried it both ways you suggested and it ended up putting the content on top of the menu now. Should I just put them in a table? I didn’t want to do it that way.

10

I think the original intent of the author was to do either of my suggestions. Not sure why it doesn’t handle it on its own, but the CSS indicates it should be done one of the two ways I indicated and not via a table.

12

The CSS is likely the culprit still.

Make sure you updated the Content div to either have the class attribute or the CSS to use Content instead of .Content