Results 1 to 5 of 5

Thread: Drop down menu behind slide show

  1. #1
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Drop down menu behind slide show

    I know that this is probably a z-index issue, but I can't for the life of me correct it. Any help would be appreciated.

    Here is the site.

    http://www.woodstockfilmfestival.com/mainslidetest.php

    Here is some of the header code below. Please let me know what other info I can provide and thanks so much in advance.


    #banner_home {
    background-image: url(images/banner/2011headerbanner.jpg);
    height: 154px;
    width: 950px;
    background-color: #000;
    background-repeat: no-repeat;
    z-index: 10000;
    }
    #imagefloat {
    position: relative;
    top: 14px;
    left: 24px;
    width: 215px;
    height: 127px;
    }
    .fontwhite {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    color: #FFF;
    }
    .scroll {
    height: 250px;
    width: 675px;
    z-index: 1;
    }
    .scroll img {
    left: 0px;
    top: 0px;
    z-index: 1;
    }
    -->
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" href="http://woodstockfilmfestival.com/index.htm_files/css3menu1/style.css" type="text/css" />
    <script src="http://www.woodstockfilmfestival.com/Scripts/AC_ActiveX.js" type="text/javascript"></script>
    <script src="http://www.woodstockfilmfestival.com/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    <style type="text/css">
    .style27 {
    font-size: 19px;
    font-weight: bold;
    }
    .Header2Orange {
    color: #930;
    font-size: 20px;
    z-index: 10000;
    }
    .red {
    color: #600;
    }
    .black {
    color: #000;
    }
    .redheader {
    color: #900;
    }
    .contents {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 16px;
    font-weight: bolder;
    color: #003;
    z-index: 10000;
    }
    .contentsubhead {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 14px;
    font-weight: normal;
    color: #900;
    position:relative;
    z-index: 10000;
    }
    .bodytext {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 14px;
    color: #000;
    font-weight: normal;
    }
    body, td, th {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    .bodytext1 {
    font-size: 14px;
    }
    .bodytext2 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 14px;
    color: #000;
    }
    .floatleft {
    float: left;
    padding-right: 5px;
    padding-bottom: 5px;
    }
    .bodytext3 {
    font-family: Palatino;
    font-size: 14px;
    }
    #Table_01 tr td div table tr td div table tr td a {
    color: #000;
    }
    .fontNORMAL18 {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: normal;
    color: #000000;
    }
    .fontNORMALitalic18 {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: normal;
    color: #000000;
    }
    #Table_01 tr td table tr .style27 .fontNORMAL18 {
    font-weight: normal;
    }
    .fontNORMAL16italic {
    font-style: italic;
    }
    <!--
    [if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif].fontBOLD16 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    color: #000;
    }
    .fontNORMAL161 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    color: #000;
    }
    .fontWHITE {
    color: #FFF;
    }
    .scroll {
    height: 250px;
    width: 675px;
    z-index: 1;
    }
    .scroll img {
    position: static;
    left: 0px;
    top: 0px;
    z-index: 1;
    }


    -->
    </style>
    <script src=”https://ajax.googleapis.com/ajax/lib...jquery.min.js” type=”text/javascript”></script><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>

    <script>$('.scroll').cycle({
    fx: 'scrollRight'
    }) </script>

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Try reducing the z-index for the banner - knock it down to -1 to put it to the back and then gradually increase it again until the banner shows on top of the other content but underneath the menu dropdowns;
    Code:
    #banner_home {
    background-image: url(images/banner/2011headerbanner.jpg);
    height: 154px;
    width: 950px;
    background-color: #000;
    background-repeat: no-repeat;
    z-index: 10000;
    }
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    Try reducing the z-index for the banner - knock it down to -1 to put it to the back and then gradually increase it again until the banner shows on top of the other content but underneath the menu dropdowns;
    Code:
    #banner_home {
    background-image: url(images/banner/2011headerbanner.jpg);
    height: 154px;
    width: 950px;
    background-color: #000;
    background-repeat: no-repeat;
    z-index: 10000;
    }
    Thanks Beverly it's slideshow that needs to be underneath the drop downs and I've tried making that -1 and 0 and everything in between and nothing seems to work. I am worried that there is some issue with the coding in the drop down menus that I can't see for some reason. All of the banner stuff was created by someone else. I went in and added all the z-index values when the I first added the slider, as there weren't any in the coding, but it didn't seem to make a difference.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    I'm on iPhone so I can't do any testing at the mo. I see your menu CSS doesn't have any z-index so try adding that in with an ultra-high value (higher than anything else you've used). Also give it position (z-index only works with a position set too, which is probably why your other element's z-index values are doing unpredictable things);
    Code:
    ul#css3menu1,ul#css3menu1 ul{
    
    /*  other CSS  */
    
    z-index:99999;
    position:absolute;  /*  or try relative  */
    }
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    scacci (04-17-2013)

  6. #5
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Red face

    Quote Originally Posted by Beverleyh View Post
    I'm on iPhone so I can't do any testing at the mo. I see your menu CSS doesn't have any z-index so try adding that in with an ultra-high value (higher than anything else you've used). Also give it position (z-index only works with a position set too, which is probably why your other element's z-index values are doing unpredictable things);
    Code:
    ul#css3menu1,ul#css3menu1 ul{
    
    /*  other CSS  */
    
    z-index:99999;
    position:absolute;  /*  or try relative  */
    }
    That did it Beverly.

    Thanks so much for all your help!!!

Similar Threads

  1. drop in Slide Show
    By lasa2 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-13-2012, 03:50 PM
  2. drop in slide show
    By Barb Copping in forum Looking for such a script or service
    Replies: 0
    Last Post: 10-22-2009, 06:01 PM
  3. help with drop in slide show
    By celtdragonus in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-19-2008, 03:48 AM
  4. Drop In Slide Show
    By snowpak in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 09-05-2007, 04:38 AM
  5. Slide Show hiding Drop Down Menu
    By ers_adobe in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-15-2007, 03:16 PM

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
  •