menu item problem with asp.net 3.5

pagola · May 6th, 2011, 10:08 PM

Dear Imaar

I am in the process of creating a website similar to yours using asp.net 3.5 but i am having problems with the menu items. I want to create menu items with a vertical border separating these items and also to have the background a custom color. I have tried to edit the selected menu item and static menu item properties of the items to have a border property but it is not giving the desired effect. Do you have any tips on seprating the menu items with a vertical border or do i have to create individual buttons for the menu items. I have posted my html markup just incase you need to view what i am doing.

HTML Code:

</head>
<body>
    <form id="form1" runat="server">
    <div id="PageWrapper">
    <div id="Header" style="border: thin solid #660033">
        <a class="HeaderLink" href="~/" 
            runat="server" style="border: thin none #660033">Header Goes Here</a></div>
    
    
    <div id="MenuWrapper" align="left" class="StaticHoverStyle" 
            style="border: thin solid #660033;">
        <asp:Menu ID="Menu1" runat="server" CssClass="menu" 
            DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
            StaticEnableDefaultPopOutImage="False" BackColor="Maroon" 
            BorderColor="#660066" Font-Bold="True" Font-Italic="True" Font-Overline="False" 
            Height="36px" BorderStyle="None" >
            <StaticMenuStyle BorderStyle="Solid" />
            <StaticSelectedStyle BackColor="Maroon" BorderColor="#660066" 
                BorderStyle="Solid" BorderWidth="2px" Width="185px"/>
            <StaticMenuItemStyle BorderColor="#660066" BorderStyle="Solid" 
                CssClass="MainMenu" Font-Bold="False" Font-Italic="False" Font-Overline="False" 
                Font-Strikeout="False" Font-Underline="False" ItemSpacing="85px" 
                BackColor="Maroon" BorderWidth="1px" Height="36px" Width="185px" />
            <DynamicMenuItemStyle BorderStyle="Solid" />
        </asp:Menu>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
            ShowStartingNode="False" />
        </div>
    
    
    <asp:ContentPlaceHolder ID="cpMainContent" runat="server"></asp:ContentPlaceHolder>
    <div id="MainContent" style="border: thin solid #660033">
    <div id="Sidebar" style="border: thin solid #660033">Sidebar Goes Here</div>
    <h1 style="padding: 0px 0px 10px 0px; height: 14px;">
                     Hi there visitor and Welcome to Madison Tennis Center</h1>
        <p class="Introduction">We're glad you are paying a visit to 
            <a href="http://www.MadisonTennis.com">
                     www.MadisonTennis.com</a>, the best place to 
                     learn tennis in madison</p>
            
        
        <p class="Introduction">Feel free to have a look around, as there are lots of 
            interesting reviews and 
            pictures of the latest sessions to be found here</p>
            
    
    
    </div>
    
    <div id="Footer" style="border: thin solid #990033">Footer Goes Here</div>
    
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

please let me know if you need the css file as well

Imar · May 7th, 2011, 03:08 AM

Hi there,

In ASP.NET 3.5 , the menu is rendered as a table with table cells which in turn contain links. You should be able to apply a CSS style to the relevant elements as shown in the book, and then write CSS to target those elements in a separate CSS file.

Since they are tables, you may not be able to change everything. However, since I am not sure exectly what you want to accomplish, I can't recommend a good solution. If I were you, I'd assign static CSS classes to the menu items, and then look at the final HTML in the brwoser. You can then see where each style ends up, and modify your CSS file accordingly.

If you can't make it work, you can always use a background image for each menu item that has a border on it.

Cheers,

Imar