www.webdeveloper.com
Results 1 to 3 of 3

Thread: How can I get z-index to work with an accordian menu ?

Threaded View

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    How can I get z-index to work with an accordian menu ?

    I am trying to create a photo website that uses an accordian menu with a snippet of info in the sub menu.

    The idea is that the menu will open above the images but I can't get it to do this. I have tried to use z-index but it doesn't seem to work.

    Here is the code where I put the z-index;

    Code:
    #accordion { Position: relative;
                 top: 15px;
                  font-family: verdana;
                 font-size: 1.00em;
                color: black;
                 z-index: 10;
    }
    #accordion .item {
        position: relative;
        width: 400px;
        height: 30px; /* height = total height of A child element */
        overflow: hidden;
        font-family: verdana;
        font-size: 1.00em;
        color: black;
        transition: height ease-in-out 500ms; /* css3 transition */
        -o-transition: height ease-in-out 500ms;
        -moz-transition: height ease-in-out 500ms;
        -webkit-transition: height ease-in-out 500ms;
        border: 1px solid #ccc;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        margin-bottom: 2px;
        
    }
    #accordion a {
        display: block;
        height: 20px;
        line-height: 20px;
        background: #e6e6e6;
        padding: 5px;
        color: #1e1e1e;
        text-decoration: none;
    }
    #accordion p {
        height: 315px;
        padding: 5px;
        }
    #accordion div:hover {
        height: 345px; /* height = total height of A and P child elements */
        }
    #accordion div:hover a {
        border-bottom: 1px solid #ccc;
        font-weight: bold;
    }
    #gallery  .img { position: relative;
                    top: 15px;
                    border-color: #FDE39B;
                    border-style: outset;
                    border-width: 5px;
                  }
    I have also tried to include it in accordian .item but that didn't work either.

    I am also having problems with gallery .img the border stretches across the whole page and there is padding of 5px at the bottom.

    Both programs validate.

    The url is here

    How can I fix these problems?
    Last edited by tony webb; 09-22-2013 at 11:50 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles