www.webdeveloper.com
Results 1 to 3 of 3

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

Hybrid 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 12:50 PM.

  2. #2
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Quote Originally Posted by tony webb View Post
    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.
    I have fixed this. An article that I read about z-index in wc3 says that for z-index to work that the css section should include position: with absolute, relative or fixed.

    I used position:relative which didn't work. I Just changed it to position:absolute and everything works like a dream!

    The image border issue was fixed by me including height: 160px; - the height of the image. Not sure that this is needed though!

  3. #3
    Join Date
    Sep 2013
    Posts
    221
    One requirement for making these work is that the accordion menu and the link that controls it are siblings in the same container element.

    Try out the below code, it may help you.

    #accordion-wrapper ul {
    margin: 0
    padding: 0
    }
    #accordion-wrapper li {
    float: left
    margin: 10px 10px 0 0
    padding: 0
    list-style: none
    }
    #accordion-wrapper li:last-child {
    margin: 10px 0 0 0
    }
    #accordion-wrapper li a {
    display: block
    width: 180px
    background-color: #d6d6d6
    color: #222
    padding: 10px 15px
    text-decoration: none
    cursor: pointer
    }
    #accordion-wrapper li a:hover,
    #accordion-wrapper li a:focus {
    background-color: #222
    color: #fff
    }
    #accordion-wrapper li li {
    float: none
    margin: 0
    }
    #accordion-wrapper li li:last-child {
    margin: 0
    }
    #accordion-wrapper li li a {
    border-top: 1px solid #fff
    background-color: #e6e6e6
    }

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