SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Connecticut
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Master page content not displaying correctly

    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. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,142
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Can you post the aspx markup for us to see of your master page and any related content pages?

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Connecticut
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


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

    </StaticItemTemplate>
    </asp:Menu>
    </div>
    <!--Content-->
    <div id= "Content">
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />

    </div>
    </form>
    </body>
    </html>

  4. #4
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,142
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Connecticut
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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]
    Attached Images Attached Images

  6. #6
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,142
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Connecticut
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,142
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by venus455 View Post
    This is the original style sheet as the book has it. When I use this, the content part appears directly below the menu.
    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:
    Code HTML4Strict:
    <div id = "Header">

    Would become
    Code HTML4Strict:
    <div id = "Header" class="Header">

    Menu:
    Code HTML4Strict:
    <div id = "Menu">

    Would become
    Code HTML4Strict:
    <div id = "Menu" class="Menu">

    Content:
    Code HTML4Strict:
    <div id = "Content">

    Would become
    Code HTML4Strict:
    <div id = "Content" class="Content">

  9. #9
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Connecticut
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,142
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Connecticut
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  12. #12
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,142
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •