SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop Down Menu hides behind images/js slideshow

    I'm having a silly problem with a menu that hides behind a js slideshow on ASP.net. Basically I'd like that the menu could show all its options but I've tried a lot of solutions like z-index, position: relative and unfortunately nothing seems to work and I don't know why...

    Do you have any idea why is that happening ?

    This is the code that I have in my html file

    Code HTML4Strict:
    #imageSlideshowHolder{
     
            width: 915px;
            height: 255px;
            background-color:#000;
            border:3px solid #317082;
            position:relative;
                top: 0px;
                left: 0px;
                z-index: 1;
        }
    .imageInGallery{        
        width:915px;
        height:255px;
        background-color:#000;
        left:0px;
        top:0px;
        position:absolute; 
     
     }
     
     #imageSlideshowHolder img{
            position:relative;
            top: 4px;
            left: 3px;
            height: 246px;
            width: 907px;
            right: 5px;
            z-index: 2;
        }

    My CSS for the slideshow

    Code HTML4Strict:
    body 
    {
    }
    #imageSlideshowHolder{
    width:907px;
    height:246px;
    background-color:#000;
    border:3px solid #317082;
    position:relative;
     
    }
    .imageInGallery{    
    width:915px;
    height:255px;
    background-color:#000;
     
    left:0px;
    top:0px;
    position:absolute;  
    }

    And my CSS code for the menu

    Code HTML4Strict:
    div.hideSkiplink
    {
    background-color:#3a4f63;
    width:100%;
    height: 38px;
    }
     
    div.menu
    {
    padding: 4px 0px 4px 8px;
    z-index: 1000;
    }
     
    div.menu ul
    {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
    z-index: 1000;
    }
     
    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;
    }

    An image that shows my problem. Inside the red box there should be another option but is completely hidden by the holder and the slideshow


    menu.jpg

    Any help would be appreciated

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hi, adrian87, welcome to the forums.

    Is this page on a server? If so, would you mind posting a link to the site? It would be better if we could see all of the code working together.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Code:
    div.menu
    {
    padding: 4px 0px 4px 8px;
    z-index: 1000;
    position:relative;
    }
    you cant apply z-index w/o some sort of positioning context: relative, absolute , or fixed.
    hope that helps.

  4. #4
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thank you guys !!!! :D

    Quote Originally Posted by dresden_phoenix View Post
    Code:
    div.menu
    {
    padding: 4px 0px 4px 8px;
    z-index: 1000;
    position:relative;
    }
    you cant apply z-index w/o some sort of positioning context: relative, absolute , or fixed.
    hope that helps.
    @ronpat Thanks man ! I haven't host the website because is a project that I'm currently developing but thank God I got a solution

    @dresden_phoenix dude you're a genius ! thank you so much ! I applied your solution in my menu code and now it works perfectly. I only added position:relative; both in my div.menu and div.menu ul and runs without any problem. Here's the final CSS code for the menu and my html file

    Code HTML4Strict:
    div.menu
    {
        padding: 4px 0px 4px 8px;
        position: relative;
        z-index: 1000;
    }
     
    div.menu ul
    {
        list-style: none;
        margin: 0px;
        padding: 0px;
        width: auto;
        position: relative;
        z-index: 1000;
    }

    and my original html code

    Code HTML4Strict:
    #imageSlideshowHolder{
     
            width: 915px;
            height: 255px;
            background-color:#000;
            border:3px solid #317082;
            position:relative;
                top: 0px;
                left: 0px;
                z-index: 1;
        }
    .imageInGallery{        
        width:915px;
        height:255px;
        background-color:#000;
        left:0px;
        top:0px;
        position:absolute; 
     
     }
     
     #imageSlideshowHolder img{
            position:relative;
            top: 4px;
            left: 3px;
            height: 246px;
            width: 907px;
            right: 5px;
            z-index: 2;
        }

    result:

    d3ha.jpg

    So basically the menu z-index should be higher than the slideshow holder z-index and also the menu must have a positioning context (in my case relative)

    Again, thank you so much guys !!!


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
  •