I am using ASP.NET. I have a slide show / image rotation that I've downloaded from an existing website and which is running perfectly. On top of the slide show I used <asp:menu> web form control to have a drop down menu. When I hover my mouse over the links, it
opens behind the images, which makes it impossible to select the links.
I have tried over many of the answers (z-index, etc) regarding drop down menus falling behind slide images / image rotations but none of the answers work in
my case.
Debug your HTML in IE developer tool or firebug. And check the z-index. Put z-index of the menu container to a higher value. Or host your application to a public site and share us the URL.
Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
I am not sure what the easy way to share my app to a public site as I have never done it before.
Do you know the easy way to do this? Is there a free ASP.NET web hosting for developers to host their apps for questions?
I am creating a simple C# web application. As I mentioned in my first post, your code works perfectly fine. However, when I added the dynamic menu web control to the default.aspx page and added your code to the default.aspx page to make this a main homepage
with the drop down menu and image slide....Then I added z-index: 1000 to the .css file. But the drop down menu falls behind the slide show. How can I remedy this?
Thank you so much.
Marked as answer by YinYang on Dec 05, 2012 06:07 PM
YinYang
Member
5 Points
23 Posts
Drop down menu falling behind slide show / image rotation
Dec 03, 2012 04:27 PM|LINK
Hello,
I am using ASP.NET. I have a slide show / image rotation that I've downloaded from an existing website and which is running perfectly. On top of the slide show I used <asp:menu> web form control to have a drop down menu. When I hover my mouse over the links, it opens behind the images, which makes it impossible to select the links.
I have tried over many of the answers (z-index, etc) regarding drop down menus falling behind slide images / image rotations but none of the answers work in my case.
Here is the Site.master template page:
<div class="menu"><asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticDisplayLevels="2" StaticSubMenuIndent="16px"></asp:Menu></div>
Here is the default.aspx page
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID ="HeadContent"><link rel="stylesheet" type="text/css" href="http://demo.webdeveloperplus.com/featured-content-slider/style.css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {$("#featured > ul").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 5000, true);}); </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID ="MainContent">
<div id="featured">
<ul class="ui-tabs-nav">
<asp:Repeater ID="header" runat="server">
<ItemTemplate><li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-<%#Eval ("ListID") %>"><img src='<%#Eval("Thumb") %>' alt="" /><span><b><%#Eval("Title") %> </b></span></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
Here is the Site.css code:
/* DEFAULTS ----------------------------------------------------------*/
body
{background: #b6b7bc;font-size: .80em;font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;margin: 0px;padding: 0px;color: #696969;}
a:link, a:visited{color: #034af3;}
a:hover{color: #1d60ff;text-decoration: none; position: relative; z-index;100 }
a:active{color: #034af3;}
/* TAB MENU ----------------------------------------------------------*/
div.hideSkiplink { background-color:#3a4f63;width:100%;}
div.menu {padding: 4px 0px 4px 8px;position: relative; z-index;100 }
div.menu ul{list-style: none;margin: 0px;padding: 0px;width: auto;position: relative; z-index;100 }
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;position: relative; z-index;100 }
div.menu ul li a:hover{background-color: #bfcbd6;color: #465c71;text-decoration: none;position: relative; z-index;100 }
div.menu ul li a:active {background-color: #465c71;color: #cfdbe6;text-decoration: none;position: relative; z-index;100 }
Thank you very much for your help -
asteranup
All-Star
30184 Points
4906 Posts
Re: Drop down menu falling behind slide show / image rotation
Dec 04, 2012 06:02 AM|LINK
Hi,
Debug your HTML in IE developer tool or firebug. And check the z-index. Put z-index of the menu container to a higher value. Or host your application to a public site and share us the URL.
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
YinYang
Member
5 Points
23 Posts
Re: Drop down menu falling behind slide show / image rotation
Dec 04, 2012 08:33 PM|LINK
Hi,
I think you are the author of this code. Thanks for sharing. I found it from here: http://forums.asp.net/p/1693184/4474572.aspx/1?Re+how+to+interact+this+jquery+with+asp+net+codes+
I am not sure what the easy way to share my app to a public site as I have never done it before.
Do you know the easy way to do this? Is there a free ASP.NET web hosting for developers to host their apps for questions?
I am creating a simple C# web application. As I mentioned in my first post, your code works perfectly fine. However, when I added the dynamic menu web control to the default.aspx page and added your code to the default.aspx page to make this a main homepage with the drop down menu and image slide....Then I added z-index: 1000 to the .css file. But the drop down menu falls behind the slide show. How can I remedy this?
Thank you so much.