[Solved] Menu Center

[Dip]

Below are my code and css..It want to center by menu , but i can't do so?
I have looked over telerik forum..so far none of then worked?

thanks,]
DIP

<

 

div style="width:90%;margin-left:auto;margin-right:auto;height:auto;text-align:center !important;">

 

 

<telerik:RadMenu ID="RadMenu1" runat="server" EnableEmbeddedSkins="false"

 

 

Skin="Dip" EnableViewState="False">

 

<

 

CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

 

 

</telerik:RadMenu>

 

 

</div>

 

//**********************************CSS*************************************/

.RadMenu_Dip

 

 

{

 

/*margin-left:40px;*/

 

 

margin-top:8px;

 

}

.RadMenu_Dip_Context

{

 

background: none;

 

 

border:0;

 

}

.RadMenu_Dip

 

.rmLink

 

{

 

text-decoration: none;

 

 

color: #fff;

 

 

background: transparent;

 

}

.RadMenu_Dip

 

.rmLink:hover,

 

.RadMenu_Dip

 

.rmFocused,

 

.RadMenu_Dip

 

.rmExpanded

 

{

 

color: #006;

 

 

background: transparent url(Image/Menu/MainItemBackgroundHover.gif) no-repeat center;

 

}

.RadMenu_Dip

 

.rmText

 

{

 

 

font: bold 10px Arial, Verdana;

 

 

line-height: 20px;

 

 

background-image:none;

 

}

 

.RadMenu_Dip

 

.rmRootGroup .rmText .rmLeftImage

 

{

 

margin: 3px 1px 0; /* should be adjusted to the size of the images, if they are larger than 16x16px */

 

}

.RadMenu_Dip

 

.rmHorizontal .rmExpandBottom,

 

.RadMenu_Dip

 

.rmHorizontal .rmExpandTop

 

{

 

background: transparent url(Image/Menu/RootGroupArrowDown.gif) no-repeat right center;

 

}

.RadMenu_Dip

 

.rmVertical .rmExpandLeft,

 

.RadMenu_Dip

 

.rmVertical .rmExpandRight

 

{

 

background: transparent url(Image/Menu/invertedGroupImage.gif) no-repeat right center;

 

}

 

.RadMenu_Dip

 

.rmSlide

 

{

 

margin-top:-1px;

 

}

.RadMenu_Dip

 

.rmGroup

 

{

 

border: solid 1px #6788be;

 

 

background: white;

 

}

.RadMenu_Dip

 

.rmGroup .rmLink

 

{

 

background: url(Image/Menu/MenuItemBackground.gif);

 

 

border: 0px;

 

 

font-size: 10px;

 

 

color: #FFF;

 

}

.RadMenu_Dip

 

.rmGroup .rmText

 

{

 

font-weight: bold !important;

 

 

color:#FFF;

 

 

text-align: center !important;

 

 

/*margin-right: 0 !important;*/

 

 

padding-left: 30px;

 

 

padding-right: 40px;

 

 

font-size: 10px;

 

}

 

.RadMenu_Dip

 

.rmGroup .rmLink:hover,

 

.RadMenu_Dip

 

.rmGroup .rmFocused,

 

.RadMenu_Dip

 

.rmGroup .rmExpanded

 

{

 

color:#000066;

 

 

background: url(Image/Menu/MainItemBackgroundHover.gif);

 

 

border: 0px;

 

}

.RadMenu_Dip

 

.rmLeftArrow,

 

.RadMenu_Dip

 

.rmRightArrow,

 

.RadMenu_Dip

 

.rmTopArrow,

 

.RadMenu_Dip

 

.rmBottomArrow,

 

.RadMenu_Dip

 

.rmLeftArrowDisabled,

 

.RadMenu_Dip

 

.rmRightArrowDisabled,

 

.RadMenu_Dip

 

.rmTopArrowDisabled,

 

.RadMenu_Dip

 

.rmBottomArrowDisabled

 

{

 

background: #e7f1ff url(Image/Menu/left.gif) center center no-repeat;

 

 

width: 15px;

 

 

text-decoration:none;

 

 

text-indent:-3000px;

 

 

color:#e7f1ff;

 

 

overflow:hidden;

 

}

.RadMenu_Dip

 

.rmTopArrow,

 

.RadMenu_Dip

 

.rmTopArrowDisabled

 

{

 

background-image: url(Image/Menu/top.gif);

 

 

width: 100%;

 

 

height: 15px;

 

}

.RadMenu_Dip

 

.rmBottomArrow,

 

.RadMenu_Dip

 

.rmBottomArrowDisabled

 

{

 

background-image:url(Image/Menu/bottom.gif);

 

 

width: 100%;

 

 

height: 15px;

 

}

.RadMenu_Dip

 

.rmRightArrow,

 

.RadMenu_Dip

 

.rmLeftArrow

 

{

 

height: 100%;

 

}

.RadMenu_Dip

 

.rmRightArrow,

 

.RadMenu_Dip

 

.rmRightArrowDisabled

 

{

 

background-image: url(Image/Menu/right.gif);

 

}

 

.RadMenu_Dip

 

.rmExpandLeft,

 

.RadMenu_Dip

 

.rmExpandRight,

 

.RadMenu_Dip

 

.rmFocused .rmExpandLeft,

 

.RadMenu_Dip

 

.rmFocused .rmExpandRight,

 

.RadMenu_Dip

 

.rmExpanded .rmExpandLeft,

 

.RadMenu_Dip

 

.rmExpanded .rmExpandRight

 

{

 

background: transparent url(Image/Menu/invertedGroupImage.gif) right center no-repeat;

 

}

.RadMenu_Dip

 

.rmGroup .rmExpandLeft,

 

.RadMenu_Dip

 

.rmGroup .rmExpandRight,

 

.RadMenu_Dip

 

.rmGroup .rmFocused .rmExpandLeft,

 

.RadMenu_Dip

 

.rmGroup .rmFocused .rmExpandRight,

 

.RadMenu_Dip

 

.rmGroup .rmExpanded .rmExpandLeft,

 

.RadMenu_Dip

 

.rmGroup .rmExpanded .rmExpandRight

 

{

 

background: transparent url(Image/Menu/groupImage.gif) right center no-repeat;

 

}

[Yana]

Hi Dip,

RadMenu can be centered using javascript in OnClientLoad event handler like this:

 <script type="text/javascript">

        function clientLoad() {
            menu = $find("<%=RadMenu1.ClientID %>");
            if (menu) {
                var items = menu.get_items();
                var sum = 0;

                for (var i = 0; i < items.get_count(); i++) {
                    sum += items.getItem(i).get_element().offsetWidth;
                }

                var menuWidth = menu.get_childListElement().clientWidth;
                var leftPadding = (menuWidth - sum) / 2;

                menu.get_element().style.marginLeft = leftPadding + "px";
            }
        }
    </script>

you should also add the following css styles to your page:

 <style type="text/css">
        div.RadMenu {
            float: none;
        }
 </style>

Greetings,
Yana
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.