Right to left asp.net menu - Help me setup my CSS

0
votes

Coders, I am trying to style my Asp.net menu control and I have a set of CSS definitions that styles my menu: Here is the CSS:

.MainMenu
{

    background: url("http://cables.com.sa/en/ddtabmenufiles/media/blockdefault.gif") repeat-x scroll center center black;
    border-color: #625E00;
    border-style: solid;
    border-width: 1px 0;
    float: right;
    font: bold 13px Arial;
    margin: 0;
    padding: 0;
    width: 100%;
}

.MainMenu a {
    float: right;
}

.MainMenu li {
    display: inline;
    float: right;
}

.MainMenu li a {
    border-right: 1px solid white;
    color: white;
    float: right;
    padding: 9px 11px;
    text-decoration: none;
}

.MainMenu li a:visited 
{
    color: white;
}


.MainMenu li a:hover, .MainMenu li a.current {
    background: url("http://cables.com.sa/en/ddtabmenufiles/media/blockactive.gif") repeat-x scroll center center transparent;
    color: white;
}

And here is the Asp.net Masterpage code:

    <asp:Menu ID="NavigationMenu" runat="server" CssClass="MainMenu" EnableViewState="False"
        IncludeStyleBlock="False" Orientation="Horizontal">
        <Items>
            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
            <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
        </Items>
    </asp:Menu>

Notice that in the CSS I have setup the floating to be ‘float: right’ because I am using this CSS style for an Arabic menu (ie: text direction: right to left + float: right). But the problem is that my menu items are still showing on the left side.

My question is, how do I set my CSS to show my menu items on the left side?

Remarks: I want my menu items to appear like this website: www.tech-nuke.com And I am taking my current style from: http://cables.com.sa/en/index.php?p=home

Thanks in advance.

4
asp.netcssmenu

4 Answers

1
votes
<div dir="rtl">
    your asp.net menu here..
</div>
0
votes

Try adding dir="rtl" in your html tag. 

<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
0
votes

If you don't want to set the direction of the whole page, just put your menu in a div element and set dir="rtl"

0
votes

you should change this tag : dir="rtl"

<form id="form1" runat="server" dir="rtl">