Site map menu and CSS

markhh · July 26th, 2011, 06:12 AM

Hi all, I have created a menu as on page 250 of Imarâs book and have ended up with the menuWrapper div a bit high and the spacing for the menu items on the left as opposed to being spaced out across the menuWrapper and spaced out equally

I have looked through the Monochrome.css file, which is applied using Themes, and I canât see the problem. The .css file is below.

Any Ideas?

Many thanks
Mark

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

*
{
font-family: Arial;
}

h1
{
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
{
width: 844px;
/*background-color: #7773A1;
/* margin: auto; */
}

#MenuWrapper
{
width: 844px;
background-image: url(Images/MenuBackground.jpg);
}

#MainContent
{
width: 664px;
float: left;
}

#SideBar
{
background-color: #C0C0C0;
width: 180px;
float: left;
background-image: url(Images/SideBar.jpg);
}

#Footer
{
background-color: #C0C0C0;
width: 844px;
clear: both;
}

.MyButton
{
color: White;
}

.ErrorMessage
{
/*error message for the validation */
color: Red;
}

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

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

Imar · July 26th, 2011, 06:21 AM

Hi there,

Hard to say based on this information alone. Can you provide a link to an online page that shows the problem? If the site is not on-line, can you post your full code for the Master Page and the final HTML of the page in the browser? If you paste code here, please paste it in Notepad first to remove color coding and then wrap the code in Code tags using the # button on the toolbar (due to a bug in this forum color coded code gets messed up a bit).

Cheers,

Imar

markhh · July 26th, 2011, 08:05 AM

Hi Imar the master page is......

Code:

 
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPages_Frontend" %>
<!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>Welcome to Planet Wrox</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    
    <div id = "PageWrapper">
    <%--The PageWrapper refers to the entire page ok--%>
        <div id = "Header"> <a href = "~/" runat = "server"></a></div>
        <div id = "MenuWrapper">
            <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" 
                Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
            </asp:Menu>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
                ShowStartingNode="False" />
        </div>
        <div id = "MainContent">
            <asp:ContentPlaceHolder ID = "cpMainContent" runat="server">
                <p>
                    <br />
                    <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
                        ShowExpandCollapse="False">
                    
                    <LevelStyles>
                    <asp:TreeNodeStyle CssClass="FirstLevelMenuItems"/>
                    </LevelStyles>
                    
                    </asp:TreeView>
                </p>
            </asp:ContentPlaceHolder>
            <%--Place holders are areas in a template where authors can add
            content to each posting (page) that is based on that template--%>
        </div>
        <div id = "SideBar">
            <asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True" 
                onselectedindexchanged="ThemeList_SelectedIndexChanged" 
                ToolTip="Select a theme">
                <asp:ListItem>Monochrome</asp:ListItem>
                <asp:ListItem>DarkGrey</asp:ListItem>
            </asp:DropDownList>
        </div>
        <div id = "Footer">Footer goes here</div>
    </div>
 
    </form>
</body>
</html>

and the final html is

[CODE]

<!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><link href="App_Themes/Monochrome/Monochrome.css" type="text/css" rel="stylesheet" /><title>
Welcome to Planet Wroxa
</title>
<link href="App_Themes/Monochrome/Monochrome.css" type="text/css" rel="stylesheet" /><style type="text/css">
/* <![CDATA[ */
#Menu1 img.icon { border-style:none;vertical-align:middle; }
#Menu1 img.separator { border-style:none;display:block; }
#Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; }
#Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }
#Menu1 ul.dynamic { z-index:1; }
#Menu1 a { text-decoration:none;white-space:nowrap;display:block; }
#Menu1 a.static { padding-left:0.15em;padding-right:0.15em; }
#Menu1 a.popout-dynamic { background:url("/WebResource.axd?d=-eCUnHSih_U9O0olftd_ReMgKZSwigF-sGH21AjPEVI1&t=634468562897236406") no-repeat right center;padding-right:14px; }
/* ]]> */
</style></head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWAgIDD2QWBAIDDzwrAA0 CAA8WAh4LXyFEYXRhQm91bmRnZAwUKwAGBRMwOjAsMDoxLDA6M iwwOjMsMDo0FCsAAhYSHgVWYWx1ZQUESG9tZR4JRGF0YUJvdW5 kZx4IU2VsZWN0ZWRnHgRUZXh0BQRIb21lHgtOYXZpZ2F0ZVVyb AUNL0RlZmF1bHQuYXNweB4HRW5hYmxlZGceClNlbGVjdGFibGV nHgdUb29sVGlwBRJHbyB0byB0aGUgaG9tZXBhZ2UeCERhdGFQY XRoBQ0vZGVmYXVsdC5hc3B4ZBQrAAIWEB8EBQdSZXZpZXdzHwE FB1Jldmlld3MfBQUVL1Jldmlld3MvRGVmYXVsdC5hc3B4HwgFH lJldmlld3MgcHVibGlzaGVkIG9uIHRoaXMgc2l0ZR8GZx8HZx8 JBRUvcmV2aWV3cy9kZWZhdWx0LmFzcHgfAmcUKwADBQcwOjAsM DoxFCsAAhYQHwQFCEJ5IEdlbnJlHwEFCEJ5IEdlbnJlHwUFGC9 SZXZpZXdzL0FsbEJ5R2VucmUuYXNweB8IBRxBbGwgUmV2aWV3c yBHcm91cGVkIGJ5IEdlbnJlHwZnHwdnHwkFGC9yZXZpZXdzL2F sbGJ5Z2VucmUuYXNweB8CZ2QUKwACFhAfBAULQWxsIFJldmlld 3MfAQULQWxsIFJldmlld3MfBQURL1Jldmlld3MvQWxsLmFzcHg fCAULQWxsIFJldmlld3MfBmcfB2cfCQURL3Jldmlld3MvYWxsL mFzcHgfAmdkFCsAAhYQHwQFBUFib3V0HwEFBUFib3V0HwUFEy9 BYm91dC9EZWZhdWx0LmFzcHgfCAUPQWJvdXQgdGhpcyBTaXRlH wZnHwdnHwkFEy9hYm91dC9kZWZhdWx0LmFzcHgfAmcUKwADBQc wOjAsMDoxFCsAAhYQHwQFCkNvbnRhY3QgVXMfAQUKQ29udGFjd CBVcx8FBRMvQWJvdXQvQ29udGFjdC5hc3B4HwgFCkNvbnRhY3Q gVXMfBmcfB2cfCQUTL2Fib3V0L2NvbnRhY3QuYXNweB8CZ2QUK wACFhAfBAUIQWJvdXQgVXMfAQUIQWJvdXQgVXMfBQUTL0Fib3V 0L0Fib3V0VXMuYXNweB8IBQhBYm91dCBVcx8GZx8HZx8JBRMvY WJvdXQvYWJvdXR1cy5hc3B4HwJnZBQrAAIWEB8EBQVMb2dpbh8 BBQVMb2dpbh8FBQsvTG9naW4uYXNweB8IBRdMb2cgaW4gdG8gd GhpcyB3ZWIgc2l0ZR8GZx8HZx8JBQsvbG9naW4uYXNweB8CZ2Q UKwACFhAfBAUQVGVzdCBzaXRlTWFwTm9kZR8BBRBUZXN0IHNpd GVNYXBOb2RlHwUFFS90ZXN0U2l0ZW1hcE5vZGUuYXNweB8IBRd Mb2cgaW4gdG8gdGhpcyB3ZWIgc2l0ZR8GZx8HZx8JBRUvdGVzd HNpdGVtYXBub2RlLmFzcHgfAmcUKwACBQMwOjAUKwACFhAfBAU RYVRlc3Qgc2l0ZU1hcE5vZGUfAQURYVRlc3Qgc2l0ZU1hcE5vZ GUfBQUWL2F0ZXN0U2l0ZW1hcE5vZGUuYXNweB8IBRdMb2cgaW4 gdG8gdGhpcyB3ZWIgc2l0ZR8GZx8HZx8JBRYvYXRlc3RzaXRlb WFwbm9kZS5hc3B4HwJnZGQCCQ8QZGQWAWZkGAEFC2N0bDAwJE1 lbnUxDw9kBQRIb21lZOOVzocn9JzIX1TY7ZF7E4dm8RLZhv4X9 B3IX3r+YRZ3" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>

<script src="/WebResource.axd?d=AgPJOGhuEzYkJ7xJyAEnkhtFZySUHYev TMkT-erPSOA1&t=634468562897236406" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKT3IbeCwKUw8moBAKKqfinDgKQx9z4BwgmRxejDVGmR0/hqxfqEcwcaL1ejWLLjzgykEv4MmLt" />
</div>

<div id = "PageWrapper">

<div id = "Header"> <a href="./"></a></div>
<div id = "MenuWrapper">
<a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=xSxz3KXfSAKFQJZjNUJf5w2&t=63 4468562897236406" width="0" height="0" style="border-width:0px;" /></a><div 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><li><a title="Log in to this web site" class="level1" href="/testSitemapNode.aspx">Test siteMapNode</a><ul class="level2">
<li><a title="Log in to this web site" class="level2" href="/atestSitemapNode.aspx">aTest siteMapNode</a></li>
</ul></li>
</ul>
</div><a id="Menu1_SkipLink"></a>

</div>
<div id = "MainContent">

<h1>
 </h1>
<h1>
Hi there visitor and welcome to Planet Wrox</h1>
Were glad you are <span class="style1">paying a visit</span> to
<a href="

Imar · July 26th, 2011, 09:04 AM

Hi there,

I can see a couple of issue with your page. There might be more, but with the broken HTML (this forum ate half the page) and colored CSS it's a bit hard to say. Here are some things I noted:

1. The Menu doesn't have a CSS class of MainMenu

2. The TreeView should be located below the menu, not in the content placeholder

3. The MainMenu class is mssing from the CSS file.

Maybe these put you on the right track. If not, try comparing your files with the ones that come with the book, or post a new version of the files here.

Cheers.

Imar

markhh · July 27th, 2011, 03:37 PM

Hi Imar, you were spot on with the .Css class of MainMenu not being applied to Menu1. Site looking as it should, correctly spaced,

Many thanks
Mark

markhh · August 2nd, 2011, 04:39 PM

Hi Imar, I didn't check the DarkGrey theme. The Treeview menu is just not quite there. I think the FirstLevelMenuItems class is not being applied.

The master page is

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPages_Frontend" %>
<!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>Welcome to Planet Wrox</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    
    <div id = "PageWrapper">
        <%--The PageWrapper refers to the entire page ok--%>
        <div id = "Header"> <a href = "~/" runat = "server"></a></div>
        <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" />
            <%--TreeView start  --%>
            <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
               ShowExpandCollapse="False">
                <LevelStyles>
                    <asp:TreeNodeStyle CssClass = "FirstLevelMenuItems" />
                </LevelStyles>
            </asp:TreeView>
            <%--TreeView end  --%>

        </div>
        <div id = "MainContent">
            <asp:ContentPlaceHolder ID = "cpMainContent" runat="server">
                
            </asp:ContentPlaceHolder>
            <%--Place holders are areas in a template where authors can add
            content to each posting (page) that is based on that template--%>
        </div>
        <div id = "SideBar">
            <asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True" 
                onselectedindexchanged="ThemeList_SelectedIndexChanged" 
                ToolTip="Select a theme">
                <asp:ListItem>Monochrome</asp:ListItem>
                <asp:ListItem>DarkGrey</asp:ListItem>
            </asp:DropDownList>
        </div>
        <div id = "Footer">Footer goes here</div>
    </div>
 
    </form>
</body>
</html>

and the final html is,

[CODE]

<!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><title>
Welcome to Planet Wroxa
</title>
<link href="App_Themes/DarkGrey/DarkGrey.css" type="text/css" rel="stylesheet" /><style type="text/css">
/* <![CDATA[ */
#Menu1 img.icon { border-style:none;vertical-align:middle; }
#Menu1 img.separator { border-style:none;display:block; }
#Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; }
#Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }
#Menu1 ul.dynamic { z-index:1; }
#Menu1 a { text-decoration:none;white-space:nowrap;display:block; }
#Menu1 a.static { padding-left:0.15em;padding-right:0.15em; }
#Menu1 a.popout-dynamic { background:url("/Site/WebResource.axd?d=Sn_CGBn9WQ3BpU9dflwaFvfX27AXMcdh yuzTdgs--PxhuITi5gXawhE0eC5MLJZ2g-tvvThPQAYL5eDWV7_y0wx-fUlq5asq848T8E6-Lp01&t=634338384965312500") no-repeat right center;padding-right:14px; }
/* ]]> */
</style></head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWAgIDD2QWBgIDDzwrAA0 CAA8WAh4LXyFEYXRhQm91bmRnZAwUKwAFBQ8wOjAsMDoxLDA6M iwwOjMUKwACFhIeBVZhbHVlBQRIb21lHglEYXRhQm91bmRnHgh TZWxlY3RlZGceBFRleHQFBEhvbWUeC05hdmlnYXRlVXJsBRIvU 2l0ZS9EZWZhdWx0LmFzcHgeB0VuYWJsZWRnHgpTZWxlY3RhYmx lZx4HVG9vbFRpcAUSR28gdG8gdGhlIGhvbWVwYWdlHghEYXRhU GF0aAUSL3NpdGUvZGVmYXVsdC5hc3B4ZBQrAAIWEB8EBQdSZXZ pZXdzHwEFB1Jldmlld3MfBQUaL1NpdGUvUmV2aWV3cy9EZWZhd Wx0LmFzcHgfCAUeUmV2aWV3cyBwdWJsaXNoZWQgb24gdGhpcyB zaXRlHwZnHwdnHwkFGi9zaXRlL3Jldmlld3MvZGVmYXVsdC5hc 3B4HwJnFCsAAwUHMDowLDA6MRQrAAIWEB8EBQhCeSBHZW5yZR8 BBQhCeSBHZW5yZR8FBR0vU2l0ZS9SZXZpZXdzL0FsbEJ5R2Vuc mUuYXNweB8IBRxBbGwgUmV2aWV3cyBHcm91cGVkIGJ5IEdlbnJ lHwZnHwdnHwkFHS9zaXRlL3Jldmlld3MvYWxsYnlnZW5yZS5hc 3B4HwJnZBQrAAIWEB8EBQtBbGwgUmV2aWV3cx8BBQtBbGwgUmV 2aWV3cx8FBRYvU2l0ZS9SZXZpZXdzL0FsbC5hc3B4HwgFC0Fsb CBSZXZpZXdzHwZnHwdnHwkFFi9zaXRlL3Jldmlld3MvYWxsLmF zcHgfAmdkFCsAAhYQHwQFBUFib3V0HwEFBUFib3V0HwUFGC9Ta XRlL0Fib3V0L0RlZmF1bHQuYXNweB8IBQ9BYm91dCB0aGlzIFN pdGUfBmcfB2cfCQUYL3NpdGUvYWJvdXQvZGVmYXVsdC5hc3B4H wJnFCsAAwUHMDowLDA6MRQrAAIWEB8EBQpDb250YWN0IFVzHwE FCkNvbnRhY3QgVXMfBQUYL1NpdGUvQWJvdXQvQ29udGFjdC5hc 3B4HwgFCkNvbnRhY3QgVXMfBmcfB2cfCQUYL3NpdGUvYWJvdXQ vY29udGFjdC5hc3B4HwJnZBQrAAIWEB8EBQhBYm91dCBVcx8BB QhBYm91dCBVcx8FBRgvU2l0ZS9BYm91dC9BYm91dFVzLmFzcHg fCAUIQWJvdXQgVXMfBmcfB2cfCQUYL3NpdGUvYWJvdXQvYWJvd XR1cy5hc3B4HwJnZBQrAAIWEB8EBQVMb2dpbh8BBQVMb2dpbh8 FBRAvU2l0ZS9Mb2dpbi5hc3B4HwgFF0xvZyBpbiB0byB0aGlzI HdlYiBzaXRlHwZnHwdnHwkFEC9zaXRlL2xvZ2luLmFzcHgfAmd kZAIHDzwrAAkCAA8WBB4NTmV2ZXJFeHBhbmRlZGceB1Zpc2lib GVoZAcQFgAWAGRkAgsPEGRkFgECAWQYAQULY3RsMDAkTWVudTE PD2QFBEhvbWVkdg6LL5WhAkOD4UIJ0GB4CqbMrVzeHS5/0NcX/lXNo+0=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>

<script src="/Site/WebResource.axd?d=t2fmhc3sD9sjw3o93_He0UkNiczpelxo Dx1ss8AKFbpGKGfI7j3-E1dl6lUDcwY04yaItfdYyKuoixEj5RUdsnO4beaiqlM2HHibDn zMtas1&t=634338384965312500" type="text/javascript"></script>
<div class="aspNetHidden">

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBALC5KCKDgKUw8moBAKKqfinDgKQx9z4B8Yl9DPs1L6ApIP iJ70yxJFhVOJ9VNq7FRVTeb8eu1zQ" />
</div>

<div id = "PageWrapper">

<div id = "Header"> <a href="./"></a></div>
<div id = "MenuWrapper">
<a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/Site/WebResource.axd?d=YNU2h5N2X52yf05rdbXKrPxxlGGD0iIP 49C2nDEPa7ZgskZrkREo-qHMk-5aK3Qe7ohrInmqeiPTG3XvjkXUGyS1F5fdJbWCOV-umVX7tfw1&t=634338384965312500" 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="/Site/Default.aspx">Home</a></li><li><a title="Reviews published on this site" class="level1" href="/Site/Reviews/Default.aspx">Reviews</a><ul class="level2">
<li><a title="All Reviews Grouped by Genre" class="level2" href="/Site/Reviews/AllByGenre.aspx">By Genre</a></li><li><a title="All Reviews" class="level2" href="/Site/Reviews/All.aspx">All Reviews</a></li>
</ul></li><li><a title="About this Site" class="level1" href="/Site/About/Default.aspx">About</a><ul class="level2">
<li><a title="Contact Us" class="level2" href="/Site/About/Contact.aspx">Contact Us</a></li><li><a title="About Us" class="level2" href="/Site/About/AboutUs.aspx">About Us</a></li>
</ul></li><li><a title="Log in to this web site" class="level1" href="/Site/Login.aspx">Login</a></li>
</ul>
</div><a id="Menu1_SkipLink"></a>

</div>
<div id = "MainContent">

<h1>
 </h1>
<h1>
Hi there visitor and welcome to Planet Wrox</h1>
Were glad you are <span class="style1">paying a visit</span> to
<a href="

Imar · August 2nd, 2011, 05:22 PM

I don't see the TreeView at all in the final HTML; only the Menu. Are you sure that the theme switching functionality correctly hides the Menu and shows the TreeView?

Imar

markhh · August 3rd, 2011, 04:07 PM

Hi Imar, you could be onto something. I changed both the darkgrey statements to false and there was a menu showing after changing to the darkgrey theme - not the Treeview Menu.

Regards
Mark

Code:

 
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class MasterPages_Frontend : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        /*This cookies  */
        /*Page.IsPostBack - Gets a value that indicates whether the page 
         * is being rendered for the first time or is being loaded in 
         * response to a postback, response is a boolean value*/
        if (!Page.IsPostBack) 
        {
            string selectedTheme = Page.Theme; /*Page.Theme Gets or sets the name of the page theme */
            HttpCookie preferredTheme = Request.Cookies.Get("PreferredTheme");
            if (preferredTheme != null)
            {
                selectedTheme = preferredTheme.Value;
            }
            {
                if (string.IsNullOrEmpty(selectedTheme) && ThemeList.Items.FindByValue(selectedTheme) != null);
            }
            ThemeList.Items.FindByValue(selectedTheme).Selected = true;
        }  
    
        
    switch (Page.Theme.ToLower())
        {
        case "darkGrey":
            Menu1.Visible = false;
            TreeView1.Visible = true;
            break;
        default:
            Menu1.Visible = true;
            TreeView1.Visible = false; 
            break;
        }
        
    }
 
    protected void ThemeList_SelectedIndexChanged(object sender, EventArgs e)
    {
        HttpCookie preferredTheme = new HttpCookie("preferredTheme");
        preferredTheme.Expires = DateTime.Now.AddMonths(3);
        preferredTheme.Value = ThemeList.SelectedValue;
        Response.Cookies.Add(preferredTheme);
        Response.Redirect(Request.Url.ToString());
        /*In the above ("preferredTheme") to the right of the expression
          is the name of the cookie and the HttpCookie preferredTheme 
         
        */
        /* Non book notes from http://msdn.microsoft.com/en-us/library/ms178194.aspx
        Response.Cookies["userName"].Value = "patrick";
        Response.Cookies["userName"].Expires = DateTime.Now.AddDays(1);
        HttpCookie aCookie = new HttpCookie("lastVisit");
        aCookie.Value = DateTime.Now.ToString();
        aCookie.Expires = DateTime.Now.AddDays(1);
        Response.Cookies.Add(aCookie);
        The example adds two cookies to the Cookies collection, one 
        named userName and the other named lastVisit. For the first 
        cookie, the values of the Cookies collection are set directly.
        You can add values to the collection this way because 
        Cookies derives from a specialized collection of type 
        NameObjectCollectionBase.
        For the second cookie, the code creates an instance of an object 
        of type HttpCookie, sets its properties, and then adds it to the
        Cookies collection via the Add method. When you instantiate 
        an HttpCookie object, you must pass the cookie name as part
        of the constructor.
        Both examples accomplish the same task, writing a cookie to the
        browser. In both methods, the expiration value must be of type
        DateTime. However, the lastVisited value is also a date-time 
        value. Because all cookie values are stored as strings, the 
        date-time value has to be converted to a String.
        */
    }
}

Imar · August 3rd, 2011, 04:11 PM

Take a look at this:

Code:

 
switch (Page.Theme.ToLower())
        {
        case "darkGrey":
            Menu1.Visible = false;
            TreeView1.Visible = true;

You're using ToLower on the theme name, but use darkGrey with a capital G to compare with. This won't match and thus the TreeView is never shown. Change darkGrey to darkgrey and it should work.

Hope this helps,

Imar

markhh · August 3rd, 2011, 05:39 PM

Hi Again Imar, your post was spot on.

Many thanks
Mark