Hello,
I want to display menu on an image centered horizontally to my page.
But as soon as I include it in a div positionned absolutely, menu stops working, it became impossible to click on subitems.
Note thta this occurs in IE7 and not in FF.
This should be trivial ??
Here are my css:
.upperdiv
{
display: block;
position: absolute;
left: 0;
top: 0;
width: auto;
height: 100px;
background-color: #333;
color: #C0C0C0;
}
.lowerdiv
{
position: absolute;
left:0;
top:100px;
width:auto;
right:0;
height:auto;
bottom:0;
background-color:#999;
}
.imgdiv
{
position: relative;
margin-left: auto;
margin-right: auto;
width: 600px;
margin-top: -20px;
height: 60px;
background: url(/Images/page-header.png) no-repeat;
}
.centermenu
{
width: 500px;
margin-left: auto;
margin-right: auto;
height: auto;
margin-top: 15px;
}
then my page
<
div class='upperdiv'></div>
<
div class='lowerdiv' >
<div class='imgdiv' >
<div class='centermenu'>
<telerik:RadMenu id="NavMen" runat="server" Flow='Horizontal' EnableViewState='true' />
</div>
</div>
</div>
Thanks for a way to do it under IE7 ...and FF
CS
1 Answer, 1 is accepted
Here's your modified code snippet that shows the needed approach.
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| .upperdiv |
| { |
| display: block; |
| position: absolute; |
| left: 0; |
| top: 0; |
| width: auto; |
| height: 100px; |
| background-color: #333; |
| color: #C0C0C0; |
| } |
| .lowerdiv |
| { |
| position: absolute; |
| left:0; |
| top:100px; |
| width:auto; |
| right:0; |
| height:auto; |
| bottom:0; |
| background-color:#999; |
| } |
| .imgdiv |
| { |
| position: relative; |
| margin-left: auto; |
| margin-right: auto; |
| width: 600px; |
| margin-top: -20px; |
| height: 60px; |
| background: url(/Images/page-header.png) no-repeat; |
| } |
| .centermenu |
| { |
| width: 500px; |
| margin-left: auto; |
| margin-right: auto; |
| height: auto; |
| margin-top: 15px; |
| text-align: center; |
| } |
| * html div.RadMenu { display: inline; } |
| *+html div.RadMenu { display: inline; } |
| div.RadMenu |
| { |
| border: solid 1px red !important; |
| float: none; |
| display: inline-block; |
| } |
| * html div.RadMenu { display: inline; } |
| *+html div.RadMenu { display: inline; } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <div class='upperdiv'> |
| </div> |
| <div class='lowerdiv'> |
| <div class='imgdiv'> |
| <div class='centermenu'> |
| <telerik:RadMenu ID="NavMen" runat="server"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| <Items> |
| <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1"> |
| <Items> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2"> |
| </telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2"> |
| <Items> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3"> |
| </telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenu> |
| </div> |
| </div> |
| </div> |
| </form> |
| </body> |
| </html> |
Best wishes,
Paul
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.