Centering menu in a div

5 posts, 1 answers
  1. Conrad
    Conrad avatar
    11 posts
    Member since:
    May 2009

    Posted 28 May 2009 Link to this post

    Hi,

    I'm looking for a simple (not a css expert) way to center a radmenu within a div.  Preferably no js and only changes to the menu.css.

    Thanks.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 May 2009 Link to this post

    Hi Conrad,

    Checkout the following forum post which discusses how to center the RadMenu placed in div. Hope this helps.
    Menu Center

    Shinu.
  3. Conrad
    Conrad avatar
    11 posts
    Member since:
    May 2009

    Posted 29 May 2009 Link to this post

    Hi Shinu,

    I found that post but it is using a custom skin (Dip) and I'm not sure what the mods are from a standard one such as Sunset.  Also, the solution uses JS.

    What I'm looking for is what to change to the existing CSS file of on of the standard skins, such as Sunset, for it to align center.

    Any ideas?
  4. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 29 May 2009 Link to this post

    Hello Conrad,

    Please find below a sample code snippet that shows the needed approach (no JS is used).

    <html xmlns="http://www.w3.org/1999/xhtml">    
    <head id="Head1" 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" Skin="Sunset">    
                            <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>  


    Regards,
    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.
  5. Conrad
    Conrad avatar
    11 posts
    Member since:
    May 2009

    Posted 29 May 2009 Link to this post

    Hi Paul,

    Thanks a mil!!  Looks great and even a non css'er can work it.
Back to Top