This is a migrated thread and some comments may be shown as answers.
Centering menu in a div

4 Answers 249 Views
This is a migrated thread and some comments may be shown as answers.
4 Answers, 1 is accepted

Accepted
answered on 29 May 2009, 01:02 PM
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.