Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 4.5.1 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4.5.1: in C# and VB by Imar Spaanjaars; ISBN: 978-1-118-84677-3
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4.5.1 : 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 July 10th, 2015, 04:47 PM
Registered User
Points: 12, Level: 1
Points: 12, Level: 1 Points: 12, Level: 1 Points: 12, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2015
Posts: 3
Thanks: 0
Thanked 1 Time in 1 Post
Default Chapter 7 Styling the Menu Control

In the TRY IT OUT "Styling the Menu Control", I have added the same CSS rules in Monochrome.css. But the styling was not applied to the menu. When view source, "selected" was not added into the class of ul.level1.
Code:
<a title="Go to the homepage" class="level1" href="/~Default.aspx">Home</a>
Can anyone help me to figure out why?

Thank you!
 
Old July 10th, 2015, 05:24 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi there,

Can you post your relevant code?

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 July 13th, 2015, 10:38 AM
Registered User
Points: 12, Level: 1
Points: 12, Level: 1 Points: 12, Level: 1 Points: 12, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2015
Posts: 3
Thanks: 0
Thanked 1 Time in 1 Post
Default

Quote:
Originally Posted by Imar View Post
Hi there,

Can you post your relevant code?

Imar
Hi Imar,

Here is my code. Thank you!

Master Page:
Code:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPages_Frontend" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
  <script src="/Scripts/modernizr-2.7.1.js"></script>
</head>
<body>
  <form id="form1" runat="server">
    <div id="PageWrapper"> 
      <header><a href="/"></a></header>
      <nav>
          <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"></asp:Menu>
          <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
      </nav>
      <section id="MainContent">
        <asp:ContentPlaceHolder ID="cpMainContent" runat="server">
        </asp:ContentPlaceHolder>
      </section>
      <aside id="Sidebar">
        Select a theme
        <br />
        <asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ThemeList_SelectedIndexChanged">
          <asp:ListItem>Monochrome</asp:ListItem>
          <asp:ListItem>DarkGrey</asp:ListItem>
        </asp:DropDownList>
      </aside>
      <footer>Footer Goes Here</footer>
    </div>
  </form>
</body>
</html>
Site Map:
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>
    <siteMapNode url="~/Reviews/Default.aspx" title="Reviews" description="Reviews published on this site">
      <siteMapNode url="~/Reviews/AllByGenre.aspx" title="By Genre" description="All Reviews Grouped by Genre"></siteMapNode>
      <siteMapNode url="~/Reviews/All.aspx" title="All Reviews" description="All Reviews"></siteMapNode>
    </siteMapNode>
    <siteMapNode url="~/About/Default.aspx" title="About" description="All this Site">
      <siteMapNode url="~/About/Contact.aspx" title="Contact Us" description="Contact Us"></siteMapNode>
      <siteMapNode url="~/About/AboutUs.aspx" title="About Us" description="About Us"></siteMapNode>
    </siteMapNode>
    <siteMapNode url="~/Login.aspx" title="Login" description="Log in to this web site"></siteMapNode>
  </siteMapNode>
</siteMap>
CSS:
Code:
* {
    font-family: Arial, Sans-Serif;
}

body {
    margin: 0;
    background-color: #cccccc;
}

a {
    text-decoration: none;
    color: #0760B2;
}

    a:hover {
        text-decoration: underline;
    }

h1 {
    font-size: 20px;
}

h2 {
    font-size: 14px;
    color: #7773A1;
    margin-top: 10px;
}

#PageWrapper {
    width: 844px;
    background-color: #5487c0;
    margin: auto;
}

header {
    background-image: url(Images/Header.jpg);
    width: 844px;
    height: 86px;
}

    header a {
        width: 844px;
        height: 86px;
        display: block;
    }

nav {
    background-image: url(Images/MenuBackground.jpg);
    width: 827px;
    height: 36px;
    padding-top: 7px;
    padding-left: 17px;
}

    nav a {
        color: #fff;
    }

.MainMenu {
    border: 1px solid #999999;
    width: 814px;
    height: 19px;
    background-color: #555555;
}

    .MainMenu ul li {
        width: 200px;
    }

section#MainContent {
    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;
}

aside#Sidebar {
    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 {
    width: 844px;
    clear: both;
    height: 37px;
    background-color: #A8D5FE;
    color: White;
    text-align: center;
    font-size: 0.7em;
    font-weight: bold;
    line-height: 37px;
}

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

.aspNetDisabled {
    color: grey;
}

.MyButton {
    color: White;
}

ul.level1 {
    font-size: 14px;
    font-weight: bold;
    height: 19px;
    line-height: 19px;
}

    ul.level1 .selected {
        background-color: #509EE7;
    }

a.level1 {
    padding-left: 5px !important;
}

a.level2 {
    background-color: #555555;
    padding-left: 8px;
}

    a.level1:hover, a.level2:hover {
        background-color: #509EE7;
    }
The Following User Says Thank You to fanwu0124 For This Useful Post:
MadeiraSeekers (August 12th, 2015)
 
Old July 14th, 2015, 07:11 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

It looks like you're missing a dot on front of MainMenu on your CSS. MainMenu should be .MainMenu

Hope this helps,

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 July 16th, 2015, 11:31 AM
Registered User
Points: 12, Level: 1
Points: 12, Level: 1 Points: 12, Level: 1 Points: 12, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2015
Posts: 3
Thanks: 0
Thanked 1 Time in 1 Post
Default

Quote:
Originally Posted by Imar View Post
It looks like you're missing a dot on front of MainMenu on your CSS. MainMenu should be .MainMenu

Hope this helps,

Imar
Thank you, Imar. But I do see ".MainMenu" in my CSS.
 
Old July 19th, 2015, 05:07 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Yeah, I see that now. I answered from the email notification from this forum which somehow didn't show the .

On which page are you trying this? Did you try clicking one of the menu items?

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 August 12th, 2015, 07:20 AM
Registered User
Points: 3, Level: 1
Points: 3, Level: 1 Points: 3, Level: 1 Points: 3, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2015
Location: portugal
Posts: 1
Thanks: 1
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by fanwu0124 View Post
Hi Imar,

Here is my code. Thank you!

Master Page:
Code:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPages_Frontend" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
  <script src="/Scripts/modernizr-2.7.1.js"></script>
</head>
<body>
  <form id="form1" runat="server">
    <div id="PageWrapper"> 
      <header><a href="/"></a></header>
      <nav>
          <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"></asp:Menu>
          <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
      </nav>
      <section id="MainContent">
        <asp:ContentPlaceHolder ID="cpMainContent" runat="server">
        </asp:ContentPlaceHolder>
      </section>
      <aside id="Sidebar">
        Select a theme
        <br />
        <asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ThemeList_SelectedIndexChanged">
          <asp:ListItem>Monochrome</asp:ListItem>
          <asp:ListItem>DarkGrey</asp:ListItem>
        </asp:DropDownList>
      </aside>
      <footer>Footer Goes Here</footer>
    </div>
  </form>
</body>
</html>
Site Map:
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>
    <siteMapNode url="~/Reviews/Default.aspx" title="Reviews" description="Reviews published on this site">
      <siteMapNode url="~/Reviews/AllByGenre.aspx" title="By Genre" description="All Reviews Grouped by Genre"></siteMapNode>
      <siteMapNode url="~/Reviews/All.aspx" title="All Reviews" description="All Reviews"></siteMapNode>
    </siteMapNode>
    <siteMapNode url="~/About/Default.aspx" title="About" description="All this Site">
      <siteMapNode url="~/About/Contact.aspx" title="Contact Us" description="Contact Us"></siteMapNode>
      <siteMapNode url="~/About/AboutUs.aspx" title="About Us" description="About Us"></siteMapNode>
    </siteMapNode>
    <siteMapNode url="~/Login.aspx" title="Login" description="Log in to this web site"></siteMapNode>
  </siteMapNode>
</siteMap>
CSS:
Code:
* {
    font-family: Arial, Sans-Serif;
}

body {
    margin: 0;
    background-color: #cccccc;
}

a {
    text-decoration: none;
    color: #0760B2;
}

    a:hover {
        text-decoration: underline;
    }

h1 {
    font-size: 20px;
}

h2 {
    font-size: 14px;
    color: #7773A1;
    margin-top: 10px;
}

#PageWrapper {
    width: 844px;
    background-color: #5487c0;
    margin: auto;
}

header {
    background-image: url(Images/Header.jpg);
    width: 844px;
    height: 86px;
}

    header a {
        width: 844px;
        height: 86px;
        display: block;
    }

nav {
    background-image: url(Images/MenuBackground.jpg);
    width: 827px;
    height: 36px;
    padding-top: 7px;
    padding-left: 17px;
}

    nav a {
        color: #fff;
    }

.MainMenu {
    border: 1px solid #999999;
    width: 814px;
    height: 19px;
    background-color: #555555;
}

    .MainMenu ul li {
        width: 200px;
    }

section#MainContent {
    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;
}

aside#Sidebar {
    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 {
    width: 844px;
    clear: both;
    height: 37px;
    background-color: #A8D5FE;
    color: White;
    text-align: center;
    font-size: 0.7em;
    font-weight: bold;
    line-height: 37px;
}

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

.aspNetDisabled {
    color: grey;
}

.MyButton {
    color: White;
}

ul.level1 {
    font-size: 14px;
    font-weight: bold;
    height: 19px;
    line-height: 19px;
}

    ul.level1 .selected {
        background-color: #509EE7;
    }

a.level1 {
    padding-left: 5px !important;
}

a.level2 {
    background-color: #555555;
    padding-left: 8px;
}

    a.level1:hover, a.level2:hover {
        background-color: #509EE7;
    }



Thanks For Sharing With us




Similar Threads
Thread Thread Starter Forum Replies Last Post
Chapter 7 Styling the Menu honzabilek4 BOOK: Beginning ASP.NET 4.5 : in C# and VB 2 June 15th, 2014 10:40 AM
Chapter 7 menu control lansingmike BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 6 October 10th, 2010 06:02 PM
chapter 7 (menu control) rock1233 BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 6 September 19th, 2009 02:44 PM
Styling the Menu Control stephenf BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 7 March 17th, 2009 02:41 PM
Chapter 3 Menu Control ybai BOOK: Beginning ASP.NET 2.0 BOOK VB ISBN: 978-0-7645-8850-1; C# ISBN: 978-0-470-04258-8 1 June 30th, 2006 02:38 AM





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