#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0

    Question CSS scrolling header not going over slideshow


    Okay so I'm building a site that I want to have a scrolling header that scrolls down the page as the user does. It works fine until the user scrolls over a CSS/Javascript slide show that I have in place. I want the header to also go over the slide show.Right now it gets hidden behind the picture of the slide show and that's not what I want.

    Does anyone know how to fix this problem?

    I know the code looks really messy right now just trying to flesh out how it's going to look.

    The HTML is here:
    <body>
    <div class="header">
    <div class="head">
    <div class="logo">
    <a class="logo" href=""><img alt="logo" src="" /></a>
    </div>
    <div class="nav">
    <ul class="navbar">
    <li><a href="">Products</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Become a College Rep</a></li>
    <li><a href="">Contact Us</a></li>
    </ul>
    </div>
    <div class="clear">
    </div>
    </div>
    </div>
    <div class="wrapper">
    <div class="container">

    <div class="home">
    <div class="hometop">
    <span class="centerstar"></span>
    </div>

    <div class="slideshow_place">
    <div id="slideshow">
    <div class="active">
    <img src="Slideshow/251083_277089015742389_197628964_n.jpg" alt="" />
    </div>
    <div>
    <img src="Slideshow/307723_271317559652868_460057784_n.jpg" alt="" />
    </div>
    </div>
    </div>
    </div>

    <div class="news">
    <div class="news_title">
    <h1>News</h1>
    </div>
    <div class="news_content">
    </div>
    </div>

    </div>
    </div>
    </div>


    </body>
    </html>


    CSS for the slide show:

    @charset "UTF-8";
    /* CSS Document */

    /*** set the width and height to match your images **/

    #slideshow {
    position:relative;
    height:400px;
    }

    #slideshow DIV {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    opacity: 0.0;
    height: 400px;
    background-color: #039;
    }

    #slideshow DIV.active {
    z-index:10;
    opacity:1.0;
    }

    #slideshow DIV.last-active {
    z-index:9;
    }

    #slideshow DIV IMG {
    height: 350px;
    display: block;
    border: 0;
    margin-bottom: 10px;
    }


    CSS for the body of the web site:
    @charset "UTF-8";
    /* Main Body CSS */

    BODY{font:normal 12px arial,sans-serif;color:#36393b;margin:0 auto;background:#36393b url('../images/bg.png') repeat;}
    H1{font:normal 28px 'YanoneKaffeesatzRegular',arial,sans-serif;color:#ffffff;text-transform:uppercase;}
    H2{font:normal 30px 'YanoneKaffeesatzRegular',arial,sans-serif;color:#ffffff;}
    P{margin:0 0 17px 0;}
    A{text-decoration:underline;color:#8bc3e0;}
    A:hover{text-decoration:none;}
    DIV.wrapper{width:975px;margin:0 auto;background:transparent;}
    DIV.container{width:933px;margin:0 auto;text-align:left;background:transparent;}
    DIV.clear{clear:both;}

    /* -------- Header -------- */
    DIV.header{width:100%;height:104px;text-align:center;background:transparent; position:fixed;z-index:2;}
    DIV.head{width:975px;height:107px;margin:0 auto;}
    DIV.logo{float:left;}
    DIV.logo A.logo IMG{margin:24px 0 0 39px;border:none;}
    DIV.nav{margin:0;float:right;}
    DIV.nav UL.navbar{margin:0;padding:0;}
    DIV.nav UL.navbar LI{list-style:none;width:175px; height:200px;float:left;background:transparent url('../images/navlibg.png') repeat-y left;}
    DIV.nav UL.navbar LI A{text-decoration:none; text-align:center; font:normal 24px 'YanoneKaffeesatzRegular',arial,sans-serif;color:#ffffff;text-transform:uppercase;padding:36px 0 36px 0;margin:0 0 0 2px;display:block;}
    DIV.nav UL.navbar LI A:hover{background-color:#e4563a;}

    /*---------Slide Show Placement--------*/
    DIV.home{padding:110px 0 0 0px;margin:0 10px 45px 10px;background:transparent;}
    DIV.homeinside{padding:110px 0 0 0px;margin:0 10px 45px 10px;}
    DIV.hometop{height:20px;background:transparent;margin:0 0 16px 0;}
    DIV.hometop SPAN.centerstar{background:transparent;width:59px;height:20px;display:block;margin:0 auto;}
    DIV.homebottom{padding:0 0 13px 0;background:transparent;width:913px;height:437px;position:relative;}
    DIV.slideshow_place{ width: 400px;margin-left: auto; margin-right: auto;}


    /* -------- News-------- */
    DIV.news{
    margin:0 86px 40px 87px;
    padding:0 0 20px 0;
    background-color:#36F;
    }
    DIV.news DIV.news_title{
    width:760px;
    height:48px;
    background-color:#06;
    margin:0 0 47px 0;
    }

    DIV.news DIV.news_title H1{
    padding:4px 0 0 15px;
    background:transparent url('../images/mglass.png') no-repeat 722px 8px;
    }

    DIV.news DIV.news_content{
    width:760px;
    height:700px;
    background-color:#003;
    }
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    10
    Rep Power
    0

    You have your understanding of z-indexes backwards


    Highest z-index number is the top most layer.

    Simply change your header z-index to 20 or 100 for that matter depends on how much layering you will be doing.

    In the future please use [ code ] tags to style your code and you may get a quicker response.

IMN logo majestic logo threadwatch logo seochat tools logo