Help on chapter 6 needed

leemark2k3 · August 26th, 2010, 12:57 AM

Hi Imar. Im going through your back for the second time carefully and trying to build my own very similar site using the book carefully. Im currently on chapter 7. Ive used my own menu options: 'Home', 'Search','Add an advert','About Us' and 'Login' instead of 'Home', 'reviews', 'gig pics', 'about us' and 'login'. However across my menu these words seem to be spaced fairly close together and do not take up the full bar as the planet wrox site does I have made in which Home is aligned as far left on the menu as you can go and Login on the futherst right.

I do not seem to be able to locate on the book where it explains how to spread my menu items out and at present my 'login' is not fully to the right meaning the menu options appear fairly closed together and crushed up.

Can you point me towards where it explains in the book how to get the menu options to spread ocross the full menubackground.jpeg menu?

Thanks.

Lee

Imar · August 26th, 2010, 04:29 AM

Hi there,

It looks like you're using the ASP.NET 3.5 version of the book with Visual Studio 2010, is that correct? If so, check out this post for an explanation and some work arounds: IE8 and the Menu

Cheers,

Imar

leemark2k3 · August 31st, 2010, 08:32 PM

No im using Visual Studio 2008 Imar. Ive followed the book carefully and not sure why they are spaced this way. How can i spread them out fully across the menu bar?

Imar · September 1st, 2010, 02:06 AM

In that case, can you post the code for the Master Page and the relevant CSS?

Cheers,

Imar

leemark2k3 · September 1st, 2010, 02:59 AM

Heres my code Imar. This is my second go at the book but im playing around and changing the odd thing to get a better understanding such as i have different menu headings as you will see. The majority of the code is exactly the same as the book so im unsure why in the bool-Home,Reviews, About and Login are perfectly spaced apart but my headings are clumped together and i just cant figure it out. Help would be appreciated. Thanks Imar.

Masterpage

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>



<!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>Master Page</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
   
</head>

<body>
    <form id="form1" runat="server">
    <div id="PageWrapper">
    <div id="Header"><a class="HeaderLink" href="~/" runat="server"></a></div>
    <div id="MenuWrapper">
    <asp:menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" 
            Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
            <StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
            <StaticSelectedStyle CssClass="StaticSelectedStyle" />
          <DynamicHoverStyle CssClass="DynamicHoverStyle" />
          <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
          <StaticHoverStyle CssClass="StaticHoverStyle" />
        </asp:menu>
        
        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
            ShowExpandCollapse="False" Visible="False">
        </asp:TreeView>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
            ShowStartingNode="False" />
    </div>
     
    <div id="MainContent">
       <asp:SiteMapPath ID="SiteMapPath1" runat="server">
        </asp:SiteMapPath><br /><br />
    
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
    </asp:ContentPlaceHolder>
    </div>
    <div id="Sidebar" align="center">
    <br />
    <br />
    
   
    
        <SSB:Banner ID="Banner1" runat="server" />
    
   
    
   </div>

   
    
    <div id="Footer"></div>
    </div>
    </form>
</body>
</html>

Default page

Code:

<%@ Page Language="C#" MasterPageFile="~/MasterPages/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="HomePage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        .style1
        {
            font-size: x-large;
            font-weight: bold;
        }
        .style2
        {
            font-size: x-large;
            font-weight: normal;
        }
        .style3
        {
            font-size: x-large;
        }
        .style4
        {
            font-size: medium;
            font-weight: normal;
        }
        .style5
        {
            font-size: medium;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="MainContent0">
        <h1>
            <span class="style3">Hi and Welcome to Salford Student Books</span><span class="style1"><b><br />
            </b>
        </h1>
        </span>
        <p>
            <span class="style4">Salford Student Books is </span>
            <span class="style2"> <a href="http://www.salford.ac.uk" class="style5">
            The University of Salford's</a></span><span class="style4"> exclusive home for buying and selling your 
            student books. Here you'll find a large range of student books in every 
            category. You can </span>
            <span class="style2"> <b class="style5">search for books</b><span 
                class="style4"> or </span>
            <b class="style5">add a book</b><span class="style4"> to sell here. </span>
            <b class="style5">
            Registration</b><span class="style4"> is absolutely free. </span>
            </span>
        </p>
        <p>
            <a href="Log-in.aspx" class="style5">Log In Here</a></p>
    </div>
</asp:Content>

leemark2k3 · September 1st, 2010, 03:00 AM

ooh i forgot the css style sheet.

Code:

*
{
    font-family: 'Times New Roman' , Times, serif;
    font-size: 13px;
    }

body
{
    /* 
		Clears white space around the body except for the top which gets 10 pixels.
	*/
    margin: 10px 0 0 0;
    font-size: 14px;
}

a
{
    /*
		Clears the underline on normal links, and give them #308462 as the color.
	*/
    color: #0000FF;
    text-decoration: none;
}

a:hover
{
	/*
		Underlines links when the users hover the mouse over them.
	*/
	text-decoration: underline;
}

h1
{
    /*
    Makes h1 elements smaller than their browser default.
  */
    font-size: 22px;
    font-weight: bold;
}

.Introduction
{
    font-style: normal;
    color: #000000;
    font-size: 16px;
}

#PageWrapper
{
    /*
		Sets the total width for the entire page. 
	*/
    width: 844px;
    background-color: #003300;
}

#Header
{
    /*
		Gives the header the same width as the PageWrapper. The height creates some room for the logo
		that is set with the background-image.
	*/
    background-image: url(Images/Header.jpg);
    width: 844px;
    height: 86px;
}

.HeaderLink
{
	/*
		The #HeaderLink is nested in the #Header. It provides a link to the homepage.
	*/
	width: 844px; 
	height: 86px; 
	display: block;	
}

#MenuWrapper
{
    /*
		The menu spans the page width, right below the header.
		At the top and left a few pixels padding is applied to create some room.
	*/
    background-image: url('Images/BackGroundMenu.jpg');
    width: 827px;
    height: 36px;
    padding-top: 7px;
    padding-left: 17px;
    background-color: #FFFFFF;
    font-size: large;
    font-weight: 700;
}

#MenuWrapper a
{
    /*
		Links in the Menu are white. This gets overriden by styles in chapter 7.
	*/
    color: #FFFFFF;
    
}

.MainMenu
{
    /*
		The Menu gets a white border on all four sides.
	*/
    border: 1px outset #C0C0C0;
    width: 814px;
    height: 19px;
    background-color: #FFFFFF;
    font-size: 18px;
}

#MainContent
{
    /*
		Defines the main content area. The #MainContent element has a minimum height of 500 pixels, but can grow if necessary.
		The font-size is 80% of its parenty element, which in this case comes down to 80% of the font
		the user has specified as the default font in the browser.
	*/
    margin: auto;
    font-size: 0.75em;
    width: 659px;
    border-left: 1px solid white;
    border-right: 2px solid white;
    float: left;
    background-color: #FFFFFF;
    min-height: 500px;
    padding: 10px;
    border: thin double #000000;
}

#Sidebar
{
    /*
		The SideBar is positioned to the right of the MainContent area. It gets the same font-size as #MainContent
		and gets a background image called Sidebar.jpg. To ensure the image is visible in (most) browsers
		on a dmall page, the element gets a minimum height of 500px. This is ignored by IE 6.
	*/
   
    font-size: 0.8em;
    background-image: url(Images/TheSidebar.jpg);
    background-repeat: no-repeat;
    background-color: #33CCCC;
    width: 152px;
    min-height: 511px;
    float: left;
    padding-top: 10px;
	padding-left: 10px;
}

#Footer
{
    /*
		The footer is positioned below all other content (yet still within PageWrapper).
		At the top, it gets a border with a dashed style, while all other sides have no border.
		clear: both is used to clear the impact of the float properties used for #MainContent and #SideBar.
	*/
    clear: both;
    height: 39px;
    background-color: #33CCCC;
    color: White;
    text-align: center;
    font-size: 0.68em;
    font-weight: bold;
    line-height: 39px;
    font-style: inherit;
    font-variant: normal;
    text-transform: lowercase;
}

.TheButton
{
    color: #308462;
}

StaticMenuItemStyle, .StaticMenuItemStyle a
{
    /* Defines the look of main menu items. */
    color: #707070;
    font-size: 15px;
    font-weight: normal;
    text-decoration: none;
    padding-left: 2px;
    word-spacing: normal;
    white-space: pre-wrap;
    text-align: center;
}

.StaticHoverStyle, .StaticSelectedStyle
{
    /* Defines the look of active and hover menu items */
    padding: 3px;
    margin: 3px;
    border: thin inset #003300;
    background-color: #C0C0C0;
}

.DynamicMenuItemStyle
{
	/* Defines the sub menu items */
	font-size: 16px;
	color: #707070;
	background-color: #cccccc;
	padding: 4px 2px 4px 3px;
}

Imar · September 1st, 2010, 06:04 AM

You're not applying the CssClass of MainMenu to the Menu:

<asp:menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"
CssClass="MainMenu">

Hope this helps,

Imar