|
Subject:
|
Master Page Control/Web.Sitemap Questions
|
|
Posted By:
|
kwilliams
|
Post Date:
|
1/3/2007 2:59:13 PM
|
I'm using the ASP.NET Master Page control for my site with the use of this tutorial: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnvs05/html/masterpages.asp, and I'm running into a few small issues with the use of the Web.sitemap doc. The code below results in about a 10px gap between each button image on the top nav. It also results in a blank button above the "Home" button, and all of the items from Web.sitemap are listed in the left nav. Here's some examples:
This is how the top nav appears:
Home About Us Contact Us
...and this is how I want the top nav to appear:
Home About Us Contact Us
This is how the left nav appears:
Home
About Us
Products
Services
Contact Us
...and this is how I want the left nav to appear:
About Us (header for buttons - not a button)
Products (button)
Services (button)
So my questions are:
1) How can I remove the indention between the top horizontal nav buttons?
2) How can I remove the empty button at the top of the left nav?
3) How can I filter Web.sitemap so that only the "About Us" items appear in the left column?
------------------------------------------------------------------------------
NavMaster.master:
<%@ Master Language="VB" CodeFile="NavMaster.master.vb" Inherits="NavMaster" Debug="True" %>
<!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>Nav MasterPage</title>
<link rel="stylesheet" type="text/css" media="screen" href="~/docs/css/screen.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<!-- Tab navigation -->
<div id="tabs">
<asp:Menu id="Menu2" runat="server"
StaticDisplayLevels="1"
StaticSubMenuIndent="1"
StaticMenuStyle-VerticalPadding="0"
Orientation="Horizontal"
StaticEnableDefaultPopOutImage="False">
<Items>
<asp:MenuItem NavigateUrl="default.aspx" ImageUrl="~/images/gif/tab1_active.gif" />
<asp:MenuItem NavigateUrl="aboutus.aspx" ImageUrl="~/images/gif/tab2_active.gif">
<asp:MenuItem Text="Products" Value="Products"></asp:MenuItem>
<asp:MenuItem Text="Services" Value="Services"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="contactus.aspx" ImageUrl="~/images/gif/tab3_active.gif">
</Items>
</asp:Menu>
</div><!-- end tabs -->
<div id="screenleft">
<asp:contentplaceholder
id="LeftColumn"
runat="server" />
</div><!-- end screenleft -->
<div id="content">
<!-- dynamic page title -->
<h1><asp:label id="lblPageTitle" runat="server" /></h1>
<br />
<!-- page content -->
<asp:contentplaceholder
id="ContentColumn"
runat="server" />
</div><!-- end content -->
<div id="screenfooter">
This is the footer section
</div><!-- end screenfooter -->
</div><!-- end wrapper -->
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</form>
</body>
</html>
------------------------------------------------------------------------------
NavMaster.aspx.vb:
Partial Class NavMaster
Inherits System.Web.UI.MasterPage
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
lblPageTitle.Text = SiteMap.CurrentNode.Description
End Sub
End Class
------------------------------------------------------------------------------
Web.sitemap:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<siteMapNode url="~/default.aspx" title="Home" description="Home">
<siteMapNode id="aboutus" url="aboutus.aspx" title="About Us" description="About Us">
<siteMapNode url="products.aspx" title="Products" description="Products" />
<siteMapNode url="services.aspx" title="Services" description="Services" />
</siteMapNode>
<siteMapNode id="contactus" url="contactus.aspx" title="Contact Us" description="Contact Us" />
</siteMapNode>
</siteMap>
------------------------------------------------------------------------------
aboutus.aspx:
<%@ Page Language="VB" MasterPageFile="~/NavMaster.master" AutoEventWireup="false" CodeFile="aboutus.aspx.vb" Inherits="aboutus_aboutus" title="About Us" %>
<asp:Content ID="Content1" ContentPlaceHolderID="LeftColumn" Runat="Server">
<div id="screenleftnav">
<asp:Menu
id="Menu1"
Runat="Server"
DataSourceID="SiteMapDataSource1"
StaticDisplayLevels="2"
DisappearAfter="5"
StaticEnableDefaultPopOutImage="False" />
</div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentColumn" Runat="Server">
This is the main content section
</asp:Content>
KWilliams
|
|
Reply By:
|
thenoseknows
|
Reply Date:
|
1/9/2007 6:24:14 PM
|
I think given enough time I could figure this out. I had a helluva time with the menu control and spacing on my companies website, and I spent a ridiculous amount of time guess and checking to fix it. Then it didn't even work in Safari and I had to research that on the web and ended up dropping in a hundred lines of browser detection code into my web.config to trick the Menu web control into thinking Safari is an "uplevel browser" (and it clearly is) which it assumes by default is not. It's friggen ridiculous. The HTML that the Menu control pukes onto your client page is chock full of HTML nested tables, and it's not indented in any neat readable fashion either so debugging it is time consuming and frustrating. However just this past week I think the .NET team released some CSS "adapter" classes for the Menu, Treeview and maybe others. I haven't tried them yet but I am thinking it might just be easier to use that, have it spitting out DIV's and stuff, and use CSS to line up your stuff as you see fit.
Let me know how this works. I am likely to follow suite soon.
|
|
Reply By:
|
thenoseknows
|
Reply Date:
|
1/14/2007 8:32:16 PM
|
I have since used the CSS friendly adapters Microsoft just made available and they seem to work well. I used them with the menu and treeview control and I like them a lot so far.
You will find yourself a lot more successful in styling these web controls if you use the adapter and make a stylesheet for it, than you would by trying to set each property one by one and emitting the standard default HTML (nested table spaghetti).
|
