Hi I have problem with Jquery Button UI “.navControl” it is overly on the nav drop menu “.menu”
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
z-index:10;
}
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;
}
/* #navControl
----------------------------------------------------------*/
.navControl
{
list-style-type:none;
margin:0;
padding:0;
color:Teal;
z-index:-1;
}
.navControl li
{
display:inline;
padding: 5px 5px;
}
.navControl li a
{
text-decoration:none;
}
PaulOB
August 24, 2012, 4:50pm
2
Hi,
Without html I can’t tell you which is the appropriate element to add the z-index but you should do this:
If the menu and the buttons are siblings then simply add position:relative to the menu container and then add a high z-index. Next add position:relative to the button container and set a lower z-index than the menu.
If the elements aren’t siblings then use the same approach on the parents of those elements that are siblings.
Note that only positioned elements can have z-index applied so if the element is static then you need to add position:relative as well.
this my html mark up
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>Compudata Project Manager</title>
<link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="Scripts/fancybox/jquery.fancybox.css" media="screen" />
<link rel="stylesheet" type="text/css" href="Scripts/fancybox/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.20.js"></script>
<script type="text/javascript" src="Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="Scripts/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="Scripts/fancybox/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="Scripts/script.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ <a href="~/Account/Login.aspx" id="HeadLoginStatus" runat="server">Log In</a>
]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold">
<asp:LoginName ID="HeadLoginName" runat="server" />
</span>! [
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
LogoutPageUrl="~/" />
]
</LoggedInTemplate>
</asp:LoginView>
</div>
<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="Home" />
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
<asp:MenuItem NavigateUrl="~/SearchTasks.aspx" Text="Search Task"
Value="Search Task"></asp:MenuItem>
<asp:MenuItem Text="Administrator" Value="Administrator">
<asp:MenuItem NavigateUrl="~/Admin/ManageProjects.aspx" Text="Manage Projects"
Value="Manage Projects"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Admin/TasksListAdmin.aspx" Text="Tasks List Admin"
Value="Tasks List Admin"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Admin/PriorityAdmin.aspx" Text="Priority Admin"
Value="Priority Admin"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Admin/StatusAdmin.aspx" Text="Status Admin"
Value="Status Admin"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Admin/BillableTypeAdmin.aspx"
Text="BillableType Admin" Value="BillableType Admin"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Admin/RolesAdmin/ManageRoles.aspx" Text="New Item"
Value="New Item"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<div>
<ul class="navControl">
<li><a href="TasksForm.aspx">+ Create New Task</a></li>
<li><a href="ProjectForm.aspx">+ Create New Project</a></li>
<li><a href="TimeSheetForm.aspx">+ Enter Timesheet</a></li>
</ul>
</div>
<div id="sideNav">
<uc1:uc_quickNav_Projects ID="uc_quickNav_Projects1" runat="server" />
</div>
<br />
<div id="mainContent">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div >
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
PaulOB
August 24, 2012, 6:45pm
4
I’d need a link to the page to debug properly but if the menu is inside #header and the buttons inside #main then the following will work:
#header{position:relative:z-index:2}
#main{position:relative:z-index:1}
However if your buttons are placed by some other means using jquery then we’d need to see the generated view source of the document.