4 Answers, 1 is accepted
0
Shinu
Top achievements
Rank 2
Rank 2
answered on 29 May 2009, 05:56 AM
Hi Conrad,
Checkout the following forum post which discusses how to center the RadMenu placed in div. Hope this helps.
Menu Center
Shinu.
Checkout the following forum post which discusses how to center the RadMenu placed in div. Hope this helps.
Menu Center
Shinu.
0
Conrad
Top achievements
Rank 1
Rank 1
answered on 29 May 2009, 10:38 AM
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?
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?
0
Accepted
Hello Conrad,
Please find below a sample code snippet that shows the needed approach (no JS is used).
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.
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.
0
Conrad
Top achievements
Rank 1
Rank 1
answered on 29 May 2009, 02:10 PM
Hi Paul,
Thanks a mil!! Looks great and even a non css'er can work it.
Thanks a mil!! Looks great and even a non css'er can work it.