CODEWITHSUNDEEP
htmlcss
Andrew
Andrew

Reputation: 3589

Text doesn't show up on part of the page HTML

I'm building a website that has a horizontal parallax scrolling. However, for some strange reason I can't get the text on the first slide(I'm trying to get the words Home to show up on the page that it scrolls to after you click the Home button at the top) to show up. For all the other pages, the words all appear except not on the first one. I've tried this on JSFiddle (http://jsfiddle.net/LZfsV/) and it shows up, but just not on the page itself. I've tried debugging with Firebug, and Firebug tells me that the area where the text is supposed to show up is there, just I can't see it. Any ideas? Thanks!

HTML: 

<div id="transition-slide-container">
<!--begin transition-slide-container-->
<div id="transition-slide">
    <div class="slide" id="home">
        <div id="inner-container">
             <h1>home</h1> 

        </div>
        <div class="center"></div>
    </div>
    <div class="slide" id="portfolio">
        <div id="inner-container">
             <h1>portfolio</h1>

        </div>
    </div>
    <div class="slide" id="about">
        <div id="inner-container">
            <h1>about</h1>
        </div>
    </div>
    <div class="slide" id="contact">
        <div id="inner-container">
             <h1>Contact</h1> 
        </div>
    </div>
</div>

CSS:

div#transition-slide-container {
    background: #bee1ff;
    padding-top: 128px;
    padding-bottom: 50px;
    min-height: 100%;
    width: 400%;
    z-index: -1;
    position: relative;
}
div#transition-slide {
    white-space: nowrap;
    left: 0;
}
.slide {
    display: inline-block;
    min-width: 24.999999%;
    margin: 0 auto;
    border-left: 1px #000 solid;
}
div#inner-container {
    max-width: 960px;
    text-align:center;
    margin: 0 auto;
    padding: 0;
}

Website: http://andrewgu12.kodingen.com/#home

Upvotes: 1

Views: 2771

Answers (2)

user2580076
user2580076

Reputation: 577

Remove the 

z-index: -1;

from the following

div#transition-slide-container {
    background: #bee1ff;
    padding-top: 128px;
    padding-bottom: 50px;
    min-height: 100%;
    width: 400%;
    z-index: -1;
    position: relative;
}

Upvotes: 1

omma2289
omma2289

Reputation: 54659

There's a z-index of -1 defined for your container, remove it and you should be fine

div#transition-slide-container {
    /* z-index: -1; remove this */
}

Upvotes: 1

Related Questions