Unable to center menu horizontally

2 posts, 0 answers
  1. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 22 Feb 2009 Link to this post

    Hello,
    I want to display menu on an image centered horizontally to my page.
    But as soon as I include it in a div positionned absolutely, menu stops working, it became impossible to click on subitems.

    Note thta this occurs in IE7 and not in FF.

    This should be trivial ??
    Here are my css:
    .upperdiv

    {

     

    display: block;

     

     

    position: absolute;

     

     

    left: 0;

     

     

    top: 0;

     

     

    width: auto;

     

     

    height: 100px;

     

     

    background-color: #333;

     

     

    color: #C0C0C0;

     

    }

     

     

     

    .lowerdiv

    {

     

    position: absolute;

     

     

    left:0;

     

     

    top:100px;

     

     

    width:auto;

     

     

    right:0;

     

     

    height:auto;

     

     

    bottom:0;

     

     

    background-color:#999;

     

    }

    .imgdiv

    {

     

    position: relative;

     

     

    margin-left: auto;

     

     

    margin-right: auto;

     

     

    width: 600px;

     

     

    margin-top: -20px;

     

     

    height: 60px;

     

     

    background: url(/Images/page-header.png) no-repeat;

     

    }

    .centermenu

    {

     

    width: 500px;

     

     

    margin-left: auto;

     

     

    margin-right: auto;

     

     

    height: auto;

     

     

    margin-top: 15px;

     

    }

    then my page

     

    <

     

    div class='upperdiv'></div>

     

    <

     

    div class='lowerdiv' >

     

     

     

    <div class='imgdiv' >

     

     

     

    <div class='centermenu'>

     

     

     

        <telerik:RadMenu id="NavMen" runat="server" Flow='Horizontal' EnableViewState='true' />

     

     

    </div>

     

     

     

    </div>
    </div>


    Thanks for a way to do it under IE7 ...and FF


    CS

     

  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 25 Feb 2009 Link to this post

    Hello Christian,

    Here's your modified code snippet that shows the needed approach.

    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title>Untitled Page</title> 
        <style type="text/css">     
        .upperdiv 
        { 
            display: block; 
            position: absolute; 
            left: 0; 
            top: 0; 
            width: auto; 
            height: 100px; 
            background-color: #333; 
            color: #C0C0C0; 
        } 
     
        .lowerdiv 
        { 
            position: absolute; 
            left:0; 
            top:100px; 
            width:auto; 
            right:0; 
            height:auto; 
            bottom:0; 
            background-color:#999; 
        } 
     
        .imgdiv 
        { 
            position: relative; 
            margin-left: auto; 
            margin-right: auto; 
            width: 600px; 
            margin-top: -20px; 
            height: 60px; 
            background: url(/Images/page-header.png) no-repeat; 
        } 
     
        .centermenu 
        { 
            width: 500px; 
            margin-left: auto; 
            margin-right: auto; 
            height: auto; 
            margin-top: 15px; 
            text-align: center; 
        } 
         
        * html div.RadMenu { display: inline; } 
        *+html div.RadMenu { display: inline; } 
        div.RadMenu 
        { 
            border: solid 1px red !important; 
            float: none; 
            display: inline-block; 
        } 
        * html div.RadMenu { display: inline; } 
        *+html div.RadMenu { display: inline; } 
     
      </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            </telerik:RadScriptManager> 
            <div class='upperdiv'
            </div> 
            <div class='lowerdiv'
                <div class='imgdiv'
                    <div class='centermenu'
                        <telerik:RadMenu ID="NavMen" runat="server"
                            <CollapseAnimation Duration="200" Type="OutQuint" /> 
                            <Items> 
                                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1"
                                    <Items> 
                                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1"
                                        </telerik:RadMenuItem> 
                                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2"
                                        </telerik:RadMenuItem> 
                                    </Items> 
                                </telerik:RadMenuItem> 
                                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2"
                                    <Items> 
                                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1"
                                        </telerik:RadMenuItem> 
                                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2"
                                        </telerik:RadMenuItem> 
                                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3"
                                        </telerik:RadMenuItem> 
                                    </Items> 
                                </telerik:RadMenuItem> 
                            </Items> 
                        </telerik:RadMenu> 
                    </div> 
                </div> 
            </div> 
        </form> 
    </body> 
    </html> 


    Best wishes,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top