Category Archives: SiteMapDataSource

SiteMapDataSource

[RESOLVED]Menu

Hi, please tell me how can I create menu like  http://www.ibm.com/us/en/ 

Thanks!

Hi, please help me to slide up and down Menu with jQuery. Here is my menu code: 

//———————-MasterPage.master————————————————//

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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" xml:lang="en">
<head id="Head1" runat="server">
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Styling a Menu</title>
    <style type="text/css" rel="stylesheet">
#logo {
   float: left;
   width: 10.5em;
   background: #CCCCCC;
   padding: 0.5em 0.5em 0.5em 1em;
   margin: 0;
}
.primaryStaticMenu
{
   background-color: transparent;
   float: right;
}
.primaryStaticMenuItem
{
   width: 10em;
   background-color: #f7f2ea;
   border-width: 1px;
   border-color: #efefef #aaab9c #ccc #efefef;
   border-style: solid;
   color: #777777;
   padding: 0.5em 0 0.5em 1em;
}
.primaryStaticHover
{
   color: #800000;
   background: #f0e7d7;
}

.primaryDynamicMenu
{
   background-color: #f7f2ea;
   border-bottom: solid 1px #ccc;
}
.primaryDynamicMenuItem
{
   width: 10em;
   background-color: #f7f2ea;
   color: #777;
   padding: 0.5em 0 0.5em 1em;
   border-width: 1px;
   border-color: #f7f2ea #aaab9c #f7f2ea #efefef;
   border-style: solid;
}
.primaryDynamicHover
{
   color: #800000;
   background: #f0e7d7;
}

.secondaryLevelOne
{
   background-color: transparent;
   background-repeat: repeat-x;
   margin: 1.5em 0 0 0;
   padding: 5px 0 0 5px;
   width: 12em;
   height: 35px;
}
.secondaryLevelTwo
{
   background: #FAFBFB;
   padding: 5px 0 5px 5px;
}
.secondaryStaticHover
{
   color: #800000;
}
  
    </style>
</head>
<body>
   <form id="form1" runat="server">
   <div id="container">
      <asp:Menu id="menuPrimary"
                runat="server"
                DataSourceID="siteSource1"
                Orientation="Horizontal"
                StaticEnableDefaultPopOutImage="false"
                DynamicPopOutImageUrl="11.png"
                StaticPopOutImageUrl="11.png"
                StaticDisplayLevels="1"
                DynamicBottomSeparatorImageUrl="11.png"
                MaximumDynamicDisplayLevels="1">
        <StaticMenuStyle CssClass="primaryStaticMenu"/>
        <StaticMenuItemStyle CssClass="primaryStaticMenuItem"/>
        <StaticHoverStyle CssClass="primaryStaticHover"/>
        <DynamicMenuStyle CssClass="primaryDynamicMenu" />
        <DynamicMenuItemStyle CssClass="primaryDynamicMenuItem"/>
        <DynamicHoverStyle CssClass="primaryDynamicHover"/>
      </asp:Menu>


      <asp:SiteMapDataSource ID="siteSource1" runat="server"
         ShowStartingNode="false"  />
         

   </div>
   </form>
</body>
</html>

 

Thanks!

Are you looking for something like as shown in the below link, but with the ASP.Net Menu control?

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

[RESOLVED]Issue with flash file and Menu CSS

Hi here is my code…this is working good in fire fox but not in IE.

dropdown menu item do not show in IE..it comes beneath the flash file.

 <tr> <td><uc1:menu ID="menu2" runat="server" /></td></tr>
           <tr id="rowFlash" bgcolor="#FFCC00"><td>
           <object width="748px" height="140px" wmode="transparent"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="mm.swf">
<embed src="mm.swf" width="748px" height="140px"></embed>
 <param name="wmode" value="transparent">
</object>
           
            
                        </td></tr>

Menu code is here

<asp:Menu DataSourceID="menuDataSource" Orientation="Horizontal" Width="100%"
        ID="lpMenu"
        runat="server"
       
        Font-Names="Verdana"
        Font-Size="X-Small"
        ForeColor="Black"
        StaticHoverStyle-ForeColor="black"
        StaticMenuItemStyle-ForeColor="#000000"
        StaticSelectedStyle-BackColor="#FF9900"
        BackColor="#FF9900"
        DynamicHorizontalOffset="3"
        StaticSubMenuIndent="15px">
        <levelsubmenustyles>
          <asp:submenustyle backcolor="#FF9900" />
          <asp:SubMenuStyle BackColor="#FF9900" />         
        </levelsubmenustyles>
            <StaticMenuItemStyle ForeColor="Maroon" BackColor="Transparent" Font-Names="Verdana" Font-Size="X-Small" CssClass="nav_item" />
            <StaticSelectedStyle BackColor="Yellow" CssClass="nav_item_active" ForeColor="black" />
            <StaticHoverStyle ForeColor="#FF9900" CssClass="nav_item_hover" />
            </asp:Menu>

 <asp:SiteMapDataSource runat="server" ID="menuDataSource" ShowStartingNode="false" />

<style type="text/css">
    .nav_item {
    color: #FF9900;
    background: url(images/n1.gif) repeat-y;
    background-position: top right;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 12px;
    height: 18px;
    text-align: left;
    text-indent: 5px;
}

.nav_item_hover {
    color: black;
    background: url(/images/n1hover.gif) repeat-y;
    background-position: top right;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 12px;
    height: 18px;
    text-align: left;
}

.nav_item_active {
    color: black;
    background: url(/images/n1hover.gif) repeat-y;
    background-position: top right;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 12px;
    height: 18px;
    text-align: left;
}
</style>
any idea?

Hello,

Add style tag to the asp:Menu and set z-index value.

style="z-index:200"

And add style tag to your table and set it to a lower value than the value you set for the asp:Menu.

style="z-index:100"

i tried but not working

Hi, what’s your site address

[RESOLVED]Can Someone here Explain How to Fix this Quirky Behavior

In my Master Page I have the Following Menu Control, and associated Sitemap Datasource:

<div id="menu">
          <asp:menu ID="mnuNavigation" runat="server" DataSourceID="NavigationDatasource"
                Orientation="Horizontal"  RenderingMode="List" CssClass="simplemenu black"></asp:menu>
           <asp:SiteMapDataSource ID="NavigationDatasource" runat="server" ShowStartingNode="false" />
        </div>

and the associated CSS File, with the assortment of colors:

/* BEGIN BLACK */

.simplemenu.black ul {
	width: 100%;
	height: 43px;
	background: #FFF url(../images/menu/simplemenu/menu-bg-black.gif) repeat-x top left;
	font-size: 0.8em;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-weight: bold;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.simplemenu.black ul li {
	display: block;
	float: left;
	margin: 0 0 0 5px;
}
.simplemenu.black ul li a {
	height: 43px;
	color: #777;
	text-decoration: none;
	display: block;
	float: left;
	line-height: 200%;
	padding: 8px 15px 0;
}
.simplemenu.black ul li a.static.highlighted {
	color: #333;
}
.simplemenu.black li a.static.selected {
	color: #FFF;
	background: #FFF url(../images/menu/simplemenu/current-bg-black.gif) repeat-x top left;
	padding: 5px 15px 0;
}

/* BEGIN BLUE */
....

This Produces a valid menu, but please see image: (blue border drawn to make sure div width is 100%)

Menu Error

Would someone please tell me why the <asp:menu> control refuses to render the rest of the image across the div, as the standard html - http://www.cssmenumaker.com/menus/017/  – rendering
displays the black line accross the entire div, or better yet how to fix it, so that I can keep my Web.sitemap, and cut out part of my development time, as opposed to coding the menu by hand?  Pasting it in as HTML does draw it across the entire div, but I
have no way to set the div class to current when a page loads, and Googling leads me to believe that others arent so fortunate either.

Advice Please,
Frustrated Web Developer

PS.  I have a working bubble style menu, at
www.lencosolutions.com
that is displaying properly, using the same technique, but I’m a perfectionist, and think these tabs wd be a better fit.

Hi,

Can you tell me which VS version you are using. I am actually have a different problem, that I am using VS 2005 and when i want to use RenderMode = "LIST"

This Property Shows an error ? Why I Don’t know.

Render Mode List outputd the Menu as a CSS style list and is only available in .NET 4.0.  All Previous versions output as Tables.

I Download the Framework 4.0 and Install it. but i don’t know how to use it. Can you please tell me ….

In Design mode, click on the asp.net menu control and then press F4 to display its properties pane…. You will find Width and HorizontalPadding properties. Set the Width to 100% and HorizontalPadding to say 10px.

Don’t use a strict DTD as in the cssmenumaker.com example.

Have you opened iot up in IE8+, Firebug, or Chrome and looked at the CSS tab of the debugger and see what is applying the border when you inspect it? They will give you the line in the CSS that applies it.

Eric

I slept on it and figured it out, here is the answer, and as I figured, it is the quirky behavior of the Menu Control when rendering an element:

Answer:
Each CssClass in the MenuControl Must have a Master Container to inherit a background from.  The offending line in the ul was:

background: #FFF url(../images/menu/simplemenu/menu-bg-black.gif) repeat-x top left;

This CSS must be taken out of the ul CSS and added to its own like so:

.simplemenu.black 
{
    width:100%;
    background: #FFF url(../images/menu/simplemenu/menu-bg-black.gif) repeat-x top left;
display:inline-block; }

This needs to be done because the page rendering output ignores any bacgrounds in your CSS and replaces them all with .level1 and .level1 selected classes. 

Please Mark this as Answer Forum Mods

[RESOLVED]Menu not seeing CSS picture?

Hi,

I am tring to apply a image to a menu but for some reason it is not being applied? I am runnign visual studio 2010. Any ideas what I am missing?

.Menu
{
 
}

.Menu ul
{
    background:#7795BD;
}

.Menu ul li
{
    background:#7795BD url(~/images/menu_bg.gif) repeat-x;
    text-align:center;
    /* set width if needed.*/
    width:200px;
}

.Menu ul li a
{
    color: black;
    padding: 4px 2px 4px;
    padding-left:8px !important;
    border:1px solid #648ABD;
    border-bottom: 0;
}

.Menu ul li a:hover
{
    background-image: none;
}

.Menu ul li a:hover
{
    color: White;
}

.Menu ul li a
{
    color: Black;
}



 <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="menu"
                  DataSourceID="SiteMapDataSource1">

        <Items>
            <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="#" Text="New Item New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                    <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                </asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
            </asp:MenuItem>
        </Items>

    </asp:Menu>

Hi,

~  in the  url(~/images/menu_bg.gif)  may not work from CSS.

try using  ../   or without it depending on the relativeness of the images folder from the current page/file.

I tried both ways it is still not applying the style. I spent 2 days on this, do you think this is a visual studio bug?

try this

background:#7795BD url(/images/menu_bg.gif) repeat-x;

its not the visual studio bug. it’s something definately wrong with your image path

background:#7795BD url(~/images/menu_bg.gif) repeat-x;

try
images/menu_bg.gif
or
../images/menu_bg.gif
or
../../images/menu_bg.gif

Ya, I am actually working with the time tracker starter kit and the tabs are not working. If I just point to a defferent gif it works but not the tab_dim.gif included with the starter kit and they are in the same images directory. stumped

Ok I figured out that the webconfig had permission set on the images folder which I did not have in my project. Thanks again

[RESOLVED]Net 4 Navigation menu – highlighting selected page

Recently I had to upload an existing site written for 3.5 to a 4 web host.  Using a quick cheat in the web.config file got everything rendering as in 3.5 – but I decided to get stuck in an sort everything to work directly in 4.  Practically everything is
working fine now – except I can’t figure out how to get the selected page highlighted in the navigation menu.

So I went back to basics, and made a simple site, with a basic MasterPage.  Using the List RenderingMode and CSS all behaved much as expected – but again I had the same problem.  If the CSS class for the menu was menu, .menu ul li a.selected in the CSS made
no difference.  Now I am not too surprised at that, since I figure JavaScript is required. I know there are some examples on the net – but I suspect that what I want is already in net 4 already has what I want – but searching around, I can’t find how to do
it.

Can anybody help me out?

You’d have to do that from the codebehind. You would have all menu links have no class. For whatever page is clicked, you would set the corresponding link’s class to an ".active" class. That active class will be have something that makes the link stand out.
If you don’t have direct access to the links (as in runat="server"), you can register startup script that has javascript change the specific link’s class to what you want. This "specific link" is set by the specific page that is requested.

Thanks for coming back to me.

Adapting the default web site in Web Developer 2010, and vb I still have a problem – and would be grateful for a further pointer.

Here’s the menu part of the MasterPage

<div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>
            </div>
Here's the code behind:
Partial Class Site
    Inherits System.Web.UI.MasterPage
    Sub Page_Load(ByVal Sender As System.Object, ByVal e As System.EventArgs)
        NavigationMenu.StaticSelectedStyle.CssClass = "active"
    End Sub
End Class

And here's the CSS
div.hideSkiplink
{
      width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: Lime;
    color: red;
    text-decoration: none;
}

I’ve seen
this page
and though, scrolling down to Listing 2 it looks as thought there is an answer if I use a sitemap (no problem) it does look complex to use, and I can’t see the error in the code above.  However, though when I click the link,
the styling kicks in – it does not persist.

So….

Thoughts on what is wrong with my code above?

Is Listing 2 in the link as good a way as any?

To use it  would I have to open a new Prject using MVC Web Application (something that is new to me)?

mvark, I am sure that would work, but I think it should be possible to do what I need using the asp.net menu control (which binds very neatly to a stemap) – and code behind something similar to that shown in  the first post.  My guess is that the
class has to be written correctly – but I haven’t figured it yet.

It seems that to do what I want, the menu control has to be bound to a data source (looks like this was so in net3.5, too). 
When I bound the menu control to a sitemap, I got what I wanted (without having to call up a page laod event in the code behind)

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!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></title>
    <style type="text/css">
    a
    {
        background-color:Blue;
    }
    
    .selected
    {
        background-color:Green;
        color:Yellow;
    }
    </style>
</head>
<body>
<form id="form1" runat="server">
 <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
     RenderingMode="List">
     <StaticSelectedStyle CssClass="selected" />
            </asp:Menu>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"
     ShowStartingNode="False" />
    <div>

        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
           
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Here is a simple way to do it. Using Javascript

window.onload = initAll;

/***********************************************************************************************/

/* This script determines witch navigation link (url) is the default page and            */
/* changes that link (tab) color to dark gray. To distinguish it from the other tabs. */
/***********************************************************************************************/

function initAll(){
var Lnk = document.getElementById("NavigationMenu").getElementsByTagName("a");
url1 = document.URL;
for (var i = 0; i < Lnk.length; i++) {
// alert("document Url " + url1 + " document by id " + Lnk[i]);

Roger Dorfield

if (Lnk[i] == url1) {
Lnk[i].style.backgroundColor = "#5e5e5e";
Lnk[i].style.color = "white";
break;
} // End if
} // for loop
}//initAll function

Why is not the output from contentpage positioned on the same place

Hello!
I have a masterpage and eight content pages where each content page is using the master page. Each content page looks the same except that the output is a different string in each. The code behind file is empty in all files even the master page file. I use
navigation so I use the web.sitemap.

I list all files below starting with the master page file I also add the web.sitemap because I use navigation:
The problem I have when I run the application is that the output from each content page is not in the same location on the screen.
I found this very strange because the content page looks the same except the output string is different in each content page.
I hope someone can explain why the output from the content pages is not on the same position on the screen ?
I have used inline styling here just to make it easy for me when testing.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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>Masterpage example</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

<body style="background-color:#00FFFF">
    <form id="form1" runat="server">
       <div>
          <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

          <table style="width:100%; background-color: #00FFFF;">
             <tr>
                <td>
                   <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" />
                </td>

                <td>
                   <asp:SiteMapPath ID="SiteMapPath1" runat="server"  />
                   <br />
                   <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                   </asp:ContentPlaceHolder>
                   <br /><br /><br /><br />
                </td>
             </tr>
          </table>
          <br />
       </div>
    </form>
</body>
</html>

Here is all eight content pages
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Consulting.aspx.cs" Inherits="Consulting" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h1 style="color: #FF0000;  font-size: xx-large; font-weight: bold">
      Consulting
   </h1>
</asp:Content>

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Hardware.aspx.cs" Inherits="Hardware" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   <h1 style="color: #FF0000;  font-size: xx-large; font-weight: bold">
      Hardware
   </h1>
</asp:Content>

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   <h1 style="color: #FF0000;  font-size: xx-large; font-weight: bold">
       Home
   </h1>
</asp:Content>

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Products.aspx.cs" Inherits="Products" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   <h1 style="color: #FF0000;  font-size: xx-large; font-weight: bold">
      Products
   </h1>
</asp:Content>

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Services.aspx.cs" Inherits="Services" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   <h1 style="color: #FF0000;  font-size: xx-large; font-weight: bold">
      Services
   </h1>
</asp:Content>

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Software.aspx.cs" Inherits="Software" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   <h1 style="color: #FF0000;  font-size: xx-large; font-weight: bold">
      Software
   </h1>
</asp:Content>

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Support.aspx.cs" Inherits="Support" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   <h1 style="color: #FF0000;  font-size: xx-large; font-weight: bold">
      Support
   </h1>
</asp:Content>

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Training.aspx.cs" Inherits="Training" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   <h1 style="color: #FF0000;  font-size: xx-large; font-weight: bold">
      Training
   </h1>
</asp:Content>

Here is the web.sitemap xml file
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode title="Home" description="Home" url="~/Home.aspx">
        <siteMapNode title="Products" description="Our products" url="~/Products.aspx">
            <siteMapNode title="Hardware" description="Hardware choices" url="~/Hardware.aspx" />
            <siteMapNode title="Software" description="Software choices" url="~/Software.aspx" />
        </siteMapNode>
     
        <siteMapNode title="Services" description="Services we offer" url="~/Services.aspx">
            <siteMapNode title="Training" description="Training classes" url="~/Training.aspx" />
            <siteMapNode title="Consulting" description="Consulting services" url="~/Consulting.aspx" />
            <siteMapNode title="Support" description="Supports plans" url="~/Support.aspx" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

//Tony

Give 40% or appropriate width to td as below

<table style="width:100%; background-color: #00FFFF;">
             <tr>
                <td width="40%">
                   <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" />
                </td>