Grow your CSS skills. Land your dream job.

Problem with Navigation

  • # May 4, 2009 at 5:42 pm

    Hello guys,

    I really need help trying to sort out my navigation for a rollover list, it keeps appearing behind my container div. I’ve tried setting the z-index for the rollover list higher to that of the container but the problem still occurs so your help would be much appreciated. Here is the HTML code:

    Here is the CSS for the relevant sections:

    Code:
    #header #nav {
    width: 960px;
    margin: 24px auto;
    font-size: 12px;
    }

    #header #nav ul {
    list-style-type: none;
    text-align: center;
    }

    #header #nav li {
    float: left;
    margin: 1px;
    position: relative;
    }

    #header #nav li a {
    display: block;
    padding: 5px;
    width: 144px;
    height: 55px;
    border: 1px solid #ffffff;
    margin-bottom: 5px;
    }

    #header #nav li a:hover, #header #nav li a:active {
    color: #FFFF00;
    background-color: #93A3C9;
    border: 1px solid #CCCCCC;
    }

    #header #nav li ul {
    display: none;
    position: absolute;
    top: 60px;
    }
    #header #nav li:hover ul {
    display: block;
    }

    And finally, here is a screenshot of the problem:

    [img]http://img355.imageshack.us/img355/9412/help.jpg[/img]

    If you need anymore code/info please let me know and i thank you in advance :)

    # May 4, 2009 at 6:05 pm

    Z-index is for absolute positioned elements.

    Is your container div absolute positioned? That would cause it to be on top of your drop down.
    Try giving your container div a z-index: -10

    Ashton Sanders

    # May 4, 2009 at 6:16 pm

    Nope my container div doesnt have any position set in CSS, so i guess its relative?

    Ok i tried giving the container a z-index of -10 and the problem still consists :(

    Code:
    #container {
    width: 960px;
    margin: 0 auto;
    background-color: #ffffff;
    z-index: -10;
    position: relative;
    }
    # May 5, 2009 at 3:10 am

    Can you provide a link?

    Or provide the HTML/CSS for the Container div?

    Thanks

    # May 5, 2009 at 5:08 am

    Its not online yet, but heres the html for the container:

    Code:

    Latest News

    January 2009

    Automation Support Services have signed an agreement with Louis Schierholz GmbH to be their representative in South East and North Asia. The agreement permits the ASS companies to work together with Schierholz in the areas of business development, the provision of maintenance services and the provision of replacement parts.

    July 2008

    Singapore Airport Terminal Services (SATS) Awards Cart Transport & Management System Upgrade Project.

    SATS, the leading provider of integrated ground handling and airline catering services at Singapore Changi Airport, has chosen the partnership group of ASS Pte Ltd & Macdonald Humfrey (Automation) Ltd, following an open tender exercise, to upgrade the existing SATS Inflight Catering Centre 2 (SICC 2) Automated Cart Transport & Management System (CTMS).

    Singapore Airport Terminal Services Limited (SATS) is the leading provider of integrated ground handling and airline catering services at Singapore Changi Airport. SATS’ network of ground handling and airline catering operations spans 18 overseas investments covering over 40 airports in the Asia Pacific region. SATS’ services include airfreight handling, airline catering, passenger services, baggage handling, ramp handling, aviation security, airline linen laundry and processed food manufacturing. SATS, a subsidiary of Singapore Airlines Limited (SIA), has been listed on the Singapore Exchange since May 2000.

    The award by SATS to ASS Pte Ltd, with Macdonald Humfrey (Automation) Ltd acting as the main sub-contractor, follows a detailed tender process where the proposed solution of ASS Pte & MHA was eventually selected as the preferred technical solution.

    The existing CTMS system has been in operation for some nine years, and is being updated to address obsolete hardware and redundant software issues as well as introduce new functionality to the system.

    The system will adopt the latest Fault Tolerant server Hardware along with the advanced Wonderware System 3.0 Platform Software.

    The system will be upgraded in a phased programme with completion planned for early 2009.

    This project further enhances the long-term relationship between ASS Pte Ltd and MacDonald Humfrey (Automation) Ltd in the field of automation and technical solutions to industry.

    June 2008

    Automation Support Services Pte Ltd have relocated to their new offices in Singapore. The offices are strategically located to be able to provide timely responses to our clients in the event that our services are required on an urgent basis.

    The location also enables ASS to offer its clients a workshop facility for light control panel assembly work and testing. The facility provides for additional area to store spare/replacement parts.

    The offices are conveniently located at:

    60 Kaki Bukit Place

    #08-13 Eunos Techpark

    Singapore 415979

    Tel : +65 6844 6223

    Fax : +65 6844 0337

    E-mail : info@assmsb.com

    Web : http://www.assmsb.com

    The CSS is in my previous post :)

    # May 6, 2009 at 3:41 pm

    Is there anyone that can solve my problem as to why my rollover list appears behind my container div?

    # May 6, 2009 at 4:31 pm
    Quote:
    Is there anyone that can solve my problem as to why my rollover list appears behind my container div?

    Not without a link.

    # May 8, 2009 at 3:56 pm

    Hi guys,

    I’ve put the page online at: http://www.ngobaheng.co.nr/ .I hope you’re now able to help.

    Thanks in advance.

    # May 8, 2009 at 5:02 pm

    Does it work if you put it on a real page and not in a frame?

    # May 8, 2009 at 9:16 pm

    Hi man,

    Why do you have position:absolute and position: relative all over the place? I don’t see any reason why you’d need those; It’s a very simple design.

    Try remove all "position:absolute" and "position:relative" as they aren’t doing anything useful.
    I’d also recommend reading about the CSS Position Property: http://www.w3schools.com/Css/pr_class_position.asp

    "apostrophe" wrote:
    Does it work if you put it on a real page and not in a frame?

    Here’s the link to the page not in an iframe:
    http://ngobaheng.webng.com/test/index.html

    # May 9, 2009 at 1:41 am

    Give the header div a height and get rid of the overflow.

    # May 9, 2009 at 5:10 am

    Hi guys,

    Thanks alot for all your help the problem is now solved, it was the overflow: hidden on the header div tag :)

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".