Chapter 7 Styling the Menu Control

fanwu0124 · July 10th, 2015, 04:47 PM

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!

Imar · July 10th, 2015, 05:24 PM

Hi there,

Can you post your relevant code?

Imar

fanwu0124 · July 13th, 2015, 10:38 AM

Quote:

Originally Posted by Imar

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

Imar · July 14th, 2015, 07:11 PM

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

Hope this helps,

Imar

fanwu0124 · July 16th, 2015, 11:31 AM

Quote:

Originally Posted by Imar

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.

Imar · July 19th, 2015, 05:07 PM

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

MadeiraSeekers · August 12th, 2015, 07:20 AM

Quote:

Originally Posted by fanwu0124

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