WebControls.Menu on Master Page Displays Under Content

Last post 05-09-2008 2:13 PM by BillShultz. 2 replies.

Sort Posts:

  • WebControls.Menu on Master Page Displays Under Content

    05-09-2008, 12:43 PM
    • Loading...
    • BillShultz
    • Joined on 05-09-2008, 12:10 PM
    • Posts 2

    I have a menu on a Web Application Master Page.  When I select a menu item at the top level, the sub-menu items drop down, but they display UNDER other Master Page and Content Page controls.  I can't find any properties for the Menu that would control how the menu item displays.  I would think that the menu items should always display on top of any other items on the web form.  I searched the forums and Google but found no answers.

    The code for the web form is below:

        <form id="form1" runat="server">
        <div>
            &nbsp;<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
                <tr>
                    <td id="HeaderArea" style="width: 900px; height: 100px; left: 0px; position: absolute; top: 10px;">
                        &nbsp;<img src="graphics/GraniteStatesmenHeader.gif" style="width: 450px; height: 70px; left: 250px; position: absolute; top: 0px;" alt="Granite Statesmen Header" />
                        <asp:Menu ID="MenuMain" style="width: 900px; height: 15px; left: 1px; position: absolute; top: 93px;" runat="server" BackColor="#E3EAEB" DynamicHorizontalOffset="2"
                            Font-Names="Times New Roman" Font-Size="Small" ForeColor="#666666" Height="15px" Orientation="Horizontal"
                            StaticSubMenuIndent="10px" OnMenuItemClick="Menu1_MenuItemClick" Font-Bold="True">
                            <StaticMenuStyle HorizontalPadding="2px" VerticalPadding="2px" />
                            <StaticSelectedStyle BackColor="#1C5E55" />
                            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                            <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
                            <DynamicMenuStyle BackColor="#E3EAEB" />
                            <DynamicSelectedStyle BackColor="#1C5E55" />
                            <DynamicMenuItemStyle HorizontalPadding="2px" VerticalPadding="2px" />
                            <StaticHoverStyle BackColor="#666666" ForeColor="White" />
                            <Items>
                                <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
                                <asp:MenuItem Text="About Us" Value="About Us">
                                    <asp:MenuItem Text="Nashua Chapter" Value="Nashua Chapter">
                                        <asp:MenuItem Text="President" Value="President"></asp:MenuItem>
                                        <asp:MenuItem Text="Board of Directors" Value="Board of Directors"></asp:MenuItem>
                                    </asp:MenuItem>
                                    <asp:MenuItem Text="Granite Statesmen" Value="Granite Statesmen">
                                        <asp:MenuItem Text="Musical Director" Value="Musical Director"></asp:MenuItem>
                                        <asp:MenuItem Text="Associate Director" Value="Associate Director"></asp:MenuItem>
                                        <asp:MenuItem Text="Music Team" Value="Music Team"></asp:MenuItem>
                                    </asp:MenuItem>
                                    <asp:MenuItem Text="Press Information" Value="Press Information"></asp:MenuItem>
                                    <asp:MenuItem Text="Contact Us" Value="Contact Us"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Join Us!" Value="Join Us!">
                                    <asp:MenuItem Text="Attend a Rehearsal" Value="Attend a Rehearsal"></asp:MenuItem>
                                    <asp:MenuItem Text="Become a Member" Value="Become a Member"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Performances" Value="Performances">
                                    <asp:MenuItem Text="Annual Show" Value="Annual Show"></asp:MenuItem>
                                    <asp:MenuItem Text="Christmas Cabaret" Value="Christmas Cabaret"></asp:MenuItem>
                                    <asp:MenuItem Text="Music Festival" Value="Music Festival"></asp:MenuItem>
                                    <asp:MenuItem Text="Performance Schedule" Value="Performance Schedule"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Recordings" Value="Recordings">
                                    <asp:MenuItem Text="Grand Old Tradition" Value="Grand Old Tradition"></asp:MenuItem>
                                    <asp:MenuItem Text="Just Add Snow" Value="Just Add Snow"></asp:MenuItem>
                                    <asp:MenuItem Text="Kick in the Head" Value="Kick in the Head">
                                    </asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Book" Value="Book">
                                    <asp:MenuItem Text="Chorus Performance" Value="Chorus Performance"></asp:MenuItem>
                                    <asp:MenuItem Text="Quartet Performance" Value="Quartet Performance"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Tickets" Value="Tickets"></asp:MenuItem>
                                <asp:MenuItem Text="Support" Value="Support">
                                    <asp:MenuItem Text="Individual Support" Value="Individual Support"></asp:MenuItem>
                                    <asp:MenuItem Text="Corporate Support" Value="Corporate Support"></asp:MenuItem>
                                    <asp:MenuItem Text="Planned Support" Value="Planned Support"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Youth in Harmony" Value="Youth in Harmony"></asp:MenuItem>
                                <asp:MenuItem Text="Photos" Value="Photos"></asp:MenuItem>
                                <asp:MenuItem Text="Links" Value="Links"></asp:MenuItem>
                                <asp:MenuItem Text="Members" Value="Members"></asp:MenuItem>
                            </Items>
                        </asp:Menu>
                    </td>
                </tr>
                <tr>
                    <td id="SalesArea">
                        &nbsp;<textarea id="TextArea1" cols="20" rows="2" style="width: 120px; height: 150px; position: absolute; left: 0px; top: 125px; display: block; float: right; visibility: visible; overflow: hidden;"></textarea>
                        &nbsp;<img src="graphics/tradition.jpg" style="width: 125px; height: 125px; left: 0px; position: absolute; top: 275px;" alt="CD: A Grand Old Tradition" />
                        &nbsp;<img src="graphics/snow.jpg" style="width: 125px; height: 125px; left: 0px; position: absolute; top: 400px;" alt="CD: A Grand Old Tradition" />
                        &nbsp;<img src="graphics/kick.jpg" style="width: 125px; height: 125px; left: 0px; position: absolute; top: 525px;" alt="CD: A Grand Old Tradition" />
                    </td>
                    <td id="Content Area" style="width: 900px; height: 200px; position: absolute; left: 125px; top: 125px">
                        &nbsp;<asp:contentplaceholder id="SiteMainBody" runat="server"></asp:contentplaceholder>
                    </td>
                </tr>
                <tr>
                    <td id="FooterArea" style="width: 900px; height: 15px; vertical-align: middle; text-align: center; left: 0px; position: absolute; top: 650px"><font face="Arial" size="1">Created, Hosted and Maintained by
                    <a target="_blank" href="http://www.acapella.com"> <span class="SpellE">Acapella</span> Technologies</a></font> </td>
                </tr>
            </table>
        </div>
        </form>

     I appreciate any help that someone might provide in recolving this problem.

    Bill

  • Re: WebControls.Menu on Master Page Displays Under Content

    05-09-2008, 1:04 PM
    • Loading...
    • JZoerman
    • Joined on 08-24-2006, 6:27 AM
    • Posts 95

    Try this

    <div style="z-index: 100>

  • Re: WebControls.Menu on Master Page Displays Under Content

    05-09-2008, 2:13 PM
    Answer
    • Loading...
    • BillShultz
    • Joined on 05-09-2008, 12:10 PM
    • Posts 2

    First of all, thank you for the very quick response.  I really appreciate that.

    I tried putting the z-index style entry on the div; tr and the menu entry.  Non worked.  Then I stared at the code for a minute and realized that table row entries were in the code in a top-down format. Just the way I designed the form. And the page was being rendered in this order: 

    • The Header Area which contained the menu control
    • The Sales and Content Areas which contained the controls on the left and the content placeholder
    • The Footer Area which contained the copyright info

    And the thought occurred to me that if I put the Sales and Content Areas as the first table row, it would be rendered first and would probably display under any controls in the following Header Area.  And the good news is that it worked.  That simple change allowed the menu items to show properly on top of the content.

    Although the z-index didn't work, thank you for sending the suggestion.  Because without the suggestion, I never would have thought about the display order of the web pages controls.

    Bill

Page 1 of 1 (3 items)