Center Radmenu

[sircutbreaker]

I have a RadMenu and i have the width set to 100%...

but I would like to center the actual menu where the buttons are active... and still have the menu expand as you add items to it
(It's dynamic and depending on users role, certain menuitems are added / subtracted..)

http://gatewayqsecurity.com/home

if you look at the page, you will see what I am talking about.

All the items in the radmenu are to the left..

How to center them? and keep the 100% status..


Thanks!

Jeff

[Kamen Bundev]

Hello Jeffrey,

To center the whole menu and apply the same background to the whole line, you should override some of the RadMenu CSS classes:

div.RadMenu_Black
{
    background: #383838 url(<%=WebResource("Telerik.Web.UI.Skins.Black.Menu.Background.gif")%>) repeat-x top left;
    text-align: center;
}

div.RadMenu ul.rmRootGroup
{
    display:inline-block;
}

*+html div.RadMenu ul.rmRootGroup /* IE7 */
{
    display:inline;
}

* html div.RadMenu ul.rmRootGroup /* IE6 */
{
    display:inline;
}

div.RadMenu ul.rmHorizontal
{
    float: none;
}

Kind regards,
Kamen Bundev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Scott]

I'm able to override the styles as indicated above and it works fine in IE, but the menu items are still left-aligned in Firefox 3.6.10.  Is there any way to achieve the same thing in FireFox?

[Kamen Bundev]

Hello Scott,

You may have some global CSS that may affect your text-alignment in Firefox. Can you show a live URL of your site where I can reproduce this issue and help you fix it? You can open a support ticket if you need the privacy, just make sure to refer to this post..

Regards,
Kamen Bundev
the Telerik team

[Scott]

Kamen,

That's exactly what the problem was.  I was able to find the CSS that was overriding the text alignment in FireFox and resolved the issue.  Thanks for your reply.

[msigman]

My CSS is located in an external CSS file, so the url('<%=WebResource("Telerik.Web.UI.Skins.Telerik.Menu.Background.gif")%>') is not evaluating.  How can I fix this?

[Cori]

Helllo msigman,

Add it to one of your ASP pages and see what url it generates, then copy it to your external css file.

[Kamen Bundev]

Hello msigman,

The generated URL may change, you can replace the image URL in the CSS with the URL to your external corresponding image, for instance url('Menu/Background.gif') if you kept the skin structure. If you don't have this image, tell me which version of RadControls for ASP.NET AJAX and which skin you're using and I will attach it here.

Best wishes,
Kamen Bundev
the Telerik team