Wrox Programmer Forums
|
BOOK: Beginning ASP.NET 4 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old January 17th, 2012, 02:14 PM
Registered User
 
Join Date: Jan 2012
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default Chapter Seven Menus

I am working on the Adding a Menu to the Site excercise. I am not able to get the menu items to appear in horizontal orientation. Am I missing something? Thanks in advance.

Here is my sitemap code:

Code:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/" title="Home" description="Home">
    <siteMapNode url="~/Default.aspx" title="Home" description="Go to the homepage" />
    <siteMapNode url="~/Reviews/Default.aspx" title="Reviews" description="Rewievs published on this site">
      <siteMapNode url="~/Reviews/AllByGenre.aspx" title="By Genre" description="All Rewievs Grouped by Genre" />
      <siteMapNode url="~/Reviews/All.aspx" title="All Reviews" description="All Rewievs" />
    </siteMapNode>
    <siteMapNode url="~/About/Default.aspx" title="About" description="About this site">
      <siteMapNode url="~/About/Contact.aspx" title="Contact Us" description="Contact Us" />
      <siteMapNode url="~/About/AboutUs.aspx" title="About Us" description="About Us" />
    </siteMapNode>
    <siteMapNode url="~/Login.aspx" title="Login" description="Log in to this web site" />
    <siteMapNode url="~/TestAbout/Default.aspx" title="Test About" description="About this site">
      <siteMapNode url="~/TestAbout/Contact.aspx" title="Test Contact Us" description="Contact Us" />
      <siteMapNode url="~/TestAbout/AboutUs.aspx" title="Test About Us" description="About Us" />
    </siteMapNode>
  </siteMapNode>
</siteMap>
Below is the source code snippet for the menu.

Code:
<div id="MenuWrapper"> 
    <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" 
            DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
            StaticEnableDefaultPopOutImage="False"></asp:Menu>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
            ShowStartingNode="False" />
     </div>
Below is the system node from my web.config file:
Code:
  <system.web>
    <pages theme="Monochrome" ></pages>
    <compilation debug="true" targetFramework="4.0"/>
  </system.web>
Note - I did skip some of the exercises where the user could dynamically select a them Monochrome or Dark Grey.
 
Old January 18th, 2012, 08:58 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi there,

Looks like the CSS for the menu is not in place or not in order. The CSS for the menu floats the li items that make up the menu so they end up next to each other. Take a look at the CSS for the menu in the Monochrome theme to see what you need to add.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old January 18th, 2012, 11:03 PM
Registered User
 
Join Date: Jan 2012
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I copied and pasted all the source code for Chapter 7 into my Web site. I still get one vertical column of Menu Items.

I did View Source on the page that is displayed in the browser. Below is the portion for the MenuWrapper and Menu1 nodes. Does it look like what you expect? Thank you.

Joe

Code:
<div id="MenuWrapper">
      <a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=cHXNN7kMrxYRym7B2_MZ8-T-NJaE5p9xIyjwB1ScAnOunuGlEYDlVXLoZ5WQGuMZcdlX6Lui-HWEWMjogkVfAoHe1pEcZleYEA7TCyG98Xs1&amp;t=634618152606250000" width="0" height="0" style="border-width:0px;" /></a><div class="MainMenu" id="Menu1">
<ul class="level1">
	<li><a title="Go to the homepage" class="level1 selected" href="/Default.aspx">Home</a>
</li><li><a title="Reviews published on this site" class="level1" href="/Reviews/Default.aspx">Reviews</a><ul class="level2">
			<li><a title="All Reviews Grouped by Genre" class="level2" href="/Reviews/AllByGenre.aspx">By Genre</a></li><li><a title="All Reviews" class="level2" href="/Reviews/All.aspx">All Reviews</a></li>
		</ul></li><li><a title="About this Site" class="level1" href="/About/Default.aspx">About</a><ul class="level2">
			<li><a title="Contact Us" class="level2" href="/About/Contact.aspx">Contact Us</a></li><li><a title="About Us" class="level2" href="/About/AboutUs.aspx">About Us</a></li>
		</ul></li><li><a title="Log in to this web site" class="level1" href="/Login.aspx">Login</a></li>
	</ul>
</div><a id="Menu1_SkipLink"></a>
      
      
    </div>
 
Old January 19th, 2012, 04:04 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Can you also post the CSS that is in effect for this page?

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old January 19th, 2012, 02:15 PM
Registered User
 
Join Date: Jan 2012
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Here is the monochrome.css code. I also noticed when I selected the DarkGrey option from the picklist on the website, the appearance does not change - not sure if this is related.

Thanks,
Joe


Code:
*
{
  /* 
    Defines the main font used throughout the entire site 
  */
  font-family: Arial, Sans-Serif;
}

body
{
  /* 
    Clears white space around the body and gives it a dark gray color.
  */
  margin: 0;
  background-color: #cccccc;
}

a
{
  /*
    Clears the underline on normal links, and gives them a purple text color.
  */
  text-decoration: none;
  color: #4628C4;
}

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

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

h2
{
  /* 
    Gives h2 elements a different background color and size, 
    and adds a bit of margin at the top to create room between the heading and the preceding element.
  */
  font-size : 14px;
  color : #7773A1;
  margin-top : 10px;
}

#PageWrapper
{
  /*
    Sets the total width for the entire page. Also sets the background-color
    which is used to fill the background of the Sidebar in case the MainContent block is taller than the Sidebar.
    Uses margin: auto to center the entire page in the middle of the browser's window.
  */
  width: 844px;
  background-color: #7773A1;
  margin: auto;
}

#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;
}

#Header a
{
  /*
    The #Header a is a link nested in #Header. It provides a link back to the homepage.
    The size of the link is the same as the header, so the entire header is clickable.
  */
  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/MenuBackground.jpg);
  width: 827px;
  height: 36px;
  padding-top: 7px;
  padding-left: 17px;
}

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

.MainMenu
{
  /*
    The Menu gets a white border on all four sides.
  */
  border: 1px solid white;
  width: 814px;
  height: 19px;
  background-color : #cccccc;
}

.MainMenu ul li
{
  /*
    Gives the four menu items in the main menu a width of 200px each
  */
  width: 200px;
}

#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 parent element, which in this case comes down to 80% of the font
    the user has specified as the default font in the browser.
  */
  font-size: 0.8em;
  width: 659px;
  border-left: 1px solid white;
  border-right: 2px solid white;
  float: left;
  background-color: #e1e1e1;
  min-height: 500px;
  padding: 10px;
}

#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 small page, the element gets a minimum height of 500px. This is ignored by IE 6.
  */
  font-size: 0.8em;
  color: White;
  background-image: url(Images/Sidebar.jpg);
  background-repeat: no-repeat;
  background-color: #7773A1;
  width: 142px;
  min-height: 500px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  float: left;
}

#Footer
{
  /*
    The footer is positioned below all other content (yet still within PageWrapper).
    clear: both is used to clear the impact of the float properties used for #MainContent and #Sidebar.
  */
  width: 844px;
  clear: both;
  height: 37px;
  background-color : #BCD1FE;
  color: White;
  text-align: center;
  font-size: 0.7em;
  font-weight: bold;
  line-height: 37px;
}

.Introduction
{
  font-style: italic;
  color: #3e3e3e;
}

.MyButton
{
  color: White;
}

ul.level1
{
  /* Defines the appearance of main menu items. */
  font-size: 14px;
  font-weight: bold;
  height: 19px;
  line-height: 19px;
}

ul.level1 .selected
{
  /* Defines the appearance of active menu items */
  background-color: #BCD1FE;
}

a.level1
{
  /* Adds some white space to the left of the main menu item text */
  margin-left: 5px;
}

a.level2
{
  /* Defines the appearance of the sub menu items */
  background-color: #cccccc;
  padding-left: 8px;
}

a.level1:hover, a.level2:hover
{
  /* Defines the hover style for the main and sub items */
  background-color: #BCD1FE;
}
 
Old January 20th, 2012, 11:45 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hmm, looks good to me.

The menu items are floated next to each using JavaScript generated by the menu. Did you set Orientation on the Menu control to Horizontal?

Is there a live URL I can look at?

Quote:
I also noticed when I selected the DarkGrey option from the picklist on the website, the appearance does not change
The theme is applied by code in the BasePage in App_Code. Maybe you skipped that exercise as well?

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old January 20th, 2012, 01:41 PM
Registered User
 
Join Date: Jan 2012
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

In order to solve this issue, I copied the entire contents of the online source code for Chapter 7 and am using that without any modifications. You mentioned that the menu is floated by Javascript. Could I have an Internet Explorer security setting that is preventing the Javascript? Or a antivirus setting?

Sorry I don't have a live URL.
 
Old January 20th, 2012, 01:44 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Yes, certainly. Maybe the Develpper Tools (F12 in IE) shed some light?

Otherwise, can you make the site's source availabe somewere? (Download, e-mail, whatever).

Also, what happens when you run the sample site that comes with the book?

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old January 20th, 2012, 02:07 PM
Registered User
 
Join Date: Jan 2012
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Imar,

Good News!

I had my http://localhost set us as a trusted site in IE. I reset the security settings to their default level for that zone. The menu is now horizontal! Unfortunately, I don't know which setting was the culprit. I knew it would be something I did.

Thanks for your all your help. I am enjoying the book and learning a lot.

What do you mean by the "the sample site that comes with the book?" Is there a live site that I can access? What is the URL?

Thanks again,
Joe
 
Old January 20th, 2012, 02:20 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi Joe.

Yes, there's a sample site available: www.planetwrox.com

However what I was referring to was the completed web site in the download for the book (where you also got the source from). That way, you can run the full site locally, and see how it behaves.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!





Similar Threads
Thread Thread Starter Forum Replies Last Post
Chapter 5 - Using menus with Views - Problem with the Menu button on Android Emulator Frankie3142 BOOK: Beginning Android Application Development 0 January 4th, 2012 04:59 AM
Ch 4 menus and context menus keepjumpin BOOK: Professional Android 2 Application Development 2 January 5th, 2011 07:14 PM
Ch 4 menus and context menus keepjumpin BOOK: Professional Android Application Development ISBN: 978-0-470-34471-2 0 August 19th, 2010 10:28 PM
sub menus matshediso HTML Code Clinic 2 January 31st, 2005 05:15 AM
Menus Frank Schmuck BOOK: Beginning ASP.NET 1.0 1 June 6th, 2003 01:29 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.