SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery UI button Styling - Overflow?

    Hi I have problem with Jquery Button UI ".navControl" it is overly on the nav drop menu ".menu"
    phto1.jpgphto1.jpgphto1.jpgphto1.jpg

    Code:
    /* 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;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this my html mark up

    HTML Code:
    <!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">
               &nbsp;<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>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    #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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •