4

When a new web application project in ASP.NET created, it comes with a NavigationMenu in site.master page which has 2 elements (Home & About), Please let me know how to align this menu to the right.

Here it's screenshot & code:

enter image description here

<div class="clear hideSkiplink">
    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
        IncludeStyleBlock="False" Orientation="Horizontal">
        <Items>
            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="AnaSayfa"/>                 
            <asp:MenuItem NavigateUrl="~/About.aspx" Text="Hakkında" />
        </Items>
    </asp:Menu>
</div>

Here is the rendered html code:

<div style="float: left;" id="NavigationMenu" class="menu">
    <ul style="width: auto; float: left; position: relative;" class="level1 static" role="menubar"
        tabindex="0">
        <li style="float: left; position: relative;" class="static" role="menuitem"><a class="level1 static"
            tabindex="-1" href="Default.aspx">Ana Sayfa</a></li>
        <li style="float: left; position: relative;" class="static" role="menuitem"><a class="level1 static"
            tabindex="-1" href="About.aspx">Hakkında</a></li>
    </ul>
</div>

Here CSS:

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
    text-align: right;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}
m13r
  • 2,458
  • 2
  • 29
  • 39
HOY
  • 1,067
  • 10
  • 42
  • 85
  • It'd be more helpful to show the rendered HTML rather than the .NET code. – steveax Jul 30 '12 at 06:06
  • @steveax I have added it but as I told, it is the default menu, I didn't add external codes to it, just created a new project and tring to view this menu at the right – HOY Jul 30 '12 at 06:24

2 Answers2

6

Add text-align: right; to the div.menu style in Site.css.

Since something is adding a float:left; to the menu div, you need to override it in your CSS with float:right !important; as per Rajiv's suggestion. Make your CSS look like this:

div.menu
{
    padding: 4px 0px 4px 8px;
    text-align: right;
    float: right !important;
}

The manual style being applied is probably due to some built-in menu styles. Check out the docs and the walk-throughs included there: http://msdn.microsoft.com/en-us/library/ecs0x9w5(v=vs.100) Especially the once related to ManuStyles and MenuItemStyles.

Strelok
  • 50,229
  • 9
  • 102
  • 115
  • it does not work :( I just created a fresh new project and added text-align to site.css and nothing more. – HOY Jul 30 '12 at 06:13
  • your way is working for me, but I am still confused where the inline css comes from, because changing it could be a better solution. – HOY Aug 01 '12 at 06:27
  • @HOY Override the MenuStyles and MenuItemStyles: http://msdn.microsoft.com/en-us/library/ms366731.aspx – Strelok Aug 01 '12 at 07:11
0

If you want to make text inside the div to right align go for following code

text-align:right;

But you if you want to move your whole div to right, you can go for 

float:right

for information about "Float" property read this

How to align 3 divs (left/center/right) inside another div?

Community
  • 1
  • 1
Rajiv Pingale
  • 995
  • 9
  • 27
  • I want menu control to be at the right hand side of the div, not the text. Both did not work, as you can see in the rendered html, there is float:left, I checked it and it says the location for this css is inline style sheet, but I am not able to find it in the code too. – HOY Jul 30 '12 at 06:36