CODEWITHSUNDEEP
asp.netcss
Tsarl
Tsarl

Reputation: 277

How to make 2 asp:Menu control render in the same line?

I am trying to add a 2nd menu control in the same line with an existing one but I can't manage to do it. 

<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>
            <asp:Menu ID="SmallMenu" runat="server" CssClass="smallMenu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Settings.aspx" Text="Settings"/>
                    <asp:MenuItem NavigateUrl="~/Admin.aspx" Text="Admin"/>
                </Items>
            </asp:Menu>
        </div>

Tried to format it using CSS but it's not working. The 2nd menu appears in a new line. What am I doing wrong here?

div.menu
{
    padding: 4px 0px 4px 8px;
    float:left;
    width:500px;
}

div.smallMenu
{
    padding: 4px 8px 4px 0px;
    width: 300px;
    float: right;
}

EDIT: I can make them appear in the same line if I put them inside divs and float the 2nd one to the right but now half the right menu appears to the right (outside) of the page.

Upvotes: 0

Views: 1862

Answers (2)

Duff
Duff

Reputation: 1

While I may not see very good reason to do that, try styling the two with css - then enclose each with a div tag.

Meanwhile, Using a single menu item with its proper static, dynamic and sublevel values, u can accomplished same.

Upvotes: 0

Ann L.
Ann L.

Reputation: 13965

This sounds like something you'll have to debug using your browser's client-side debugging tools. It sounds from what you describe (the splitting of the right-hand menu) as if something higher up in the CSS inheritence hierarchy is affecting the positioning of that DIV.

One other thing you could try would be further nesting of the menus:

<DIV>
  <DIV style="float:left;">
     <DIV style="float:right;">
        <asp:Menu />
     </DIV>
     <asp:Menu />
  </DIV>
</DIV>

ETA: Here's a post with a similar issue. The top 2 answers (7 and 5 points, respectively, as of this writing) have some things you could try and some further links.

Upvotes: 1

Related Questions