Hi,

I have a div to provide a background image for a menu. I'd like to position
the menu on the right side but I can't seem to find a right way of doing it.
The only way the menu will move to the right if I set text-align=right in
the div. The problem is that menu items are then also aligned on right
side. Not only that but this alignment works only in IE.

Could someone please let me know how to right-align the menu?

Menu:
<div id="menuArea">
<asp:Menu ID="topMenu" runat="server" Orientation="Horizontal"
StaticEnableDefaultPopOutImage="false"
DataSourceID="dsSiteMap">

<StaticMenuItemStyle CssClass="staticMenu" />

</asp:Menu>
<asp:SiteMapDataSource ID="dsSiteMap" runat="server"
ShowStartingNode="False" />
</div>

CSS:
#menuArea
{
background-image: url(Images/header_menu.gif);
background-repeat: no-repeat;
clear: both;
padding-right: 10px;
padding-left: 0%;
font-weight: normal;
font-size: 0.8em;
float: none;
padding-top: 0%;
padding-bottom: 0%;
margin: 0%;
color: #477897;
width: 720;
height: 39px;
/*text-align: right;*/
}

.staticMenu
{
background-color: Transparent;
float: right;
}

Thanks,
Bogdan

Re: How to float a menu on the right within a div? by bogdan

bogdan
Wed May 07 12:33:02 CDT 2008

I found the problem. I had <StaticMenuItemStyle> placed twice (not shown in
my original post) instead of <StaticMenuStyle> and <StaticMenuItemStyle>. I
thought I'd save some time by copy 'n paste but instead burnt few hours.
Lesson learned.

Bogdan


"bogdan" <bogdan@nospam.com> wrote in message
news:eEFTcOGsIHA.524@TK2MSFTNGP05.phx.gbl...
> Hi,
>
> I have a div to provide a background image for a menu. I'd like to
> position the menu on the right side but I can't seem to find a right way
> of doing it. The only way the menu will move to the right if I set
> text-align=right in the div. The problem is that menu items are then also
> aligned on right side. Not only that but this alignment works only in IE.
>
> Could someone please let me know how to right-align the menu?
>
> Menu:
> <div id="menuArea">
> <asp:Menu ID="topMenu" runat="server" Orientation="Horizontal"
> StaticEnableDefaultPopOutImage="false"
> DataSourceID="dsSiteMap">
>
> <StaticMenuItemStyle CssClass="staticMenu" />
>
> </asp:Menu>
> <asp:SiteMapDataSource ID="dsSiteMap" runat="server"
> ShowStartingNode="False" />
> </div>
>
> CSS:
> #menuArea
> {
> background-image: url(Images/header_menu.gif);
> background-repeat: no-repeat;
> clear: both;
> padding-right: 10px;
> padding-left: 0%;
> font-weight: normal;
> font-size: 0.8em;
> float: none;
> padding-top: 0%;
> padding-bottom: 0%;
> margin: 0%;
> color: #477897;
> width: 720;
> height: 39px;
> /*text-align: right;*/
> }
>
> .staticMenu
> {
> background-color: Transparent;
> float: right;
> }
>
> Thanks,
> Bogdan
>
>
>