Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4.5.1 > BOOK: Beginning ASP.NET 4.5.1 : in C# and VB
Password Reminder
Register
| FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
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!
Reply With Quote
  #2 (permalink)  
Old July 10th, 2015, 05:24 PM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 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!
Reply With Quote
  #3 (permalink)  
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;
    }
Reply With Quote
The Following User Says Thank You to fanwu0124 For This Useful Post:
MadeiraSeekers (August 12th, 2015)
  #4 (permalink)  
Old July 14th, 2015, 07:11 PM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 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!
Reply With Quote
  #5 (permalink)  
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.
Reply With Quote
  #6 (permalink)  
Old July 19th, 2015, 05:07 PM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 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!
Reply With Quote
  #7 (permalink)  
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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 08:04 AM.


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