CODEWITHSUNDEEP
htmlcssz-index
nielsv
nielsv

Reputation: 6810

Navigation with background above other div

I have a navigation on the top of my page and a div under the navigation. My html is like this:

<nav>
    <ul>
        <li>About</li>
        <li>Stop motion</li>
        <li>Contact</li>
        <li><a href="facebook.com"><img src="images/fb.png" alt="facebook"></a></li>
        <li><a href="twitter.com"><img src="images/twitter.png" alt="twitter"></a></li>
    </ul>
</nav>
<div id="stop_motion">
    <h2>Stop Motion Film: Het varken</h2>
    <iframe width="560" height="315" 
        src="//www.youtube.com/embed/lGMWS7K_4Nk?rel=0" frameborder="0" allowfullscreen>
    </iframe>
</div>

And my CSS now is like this:

nav{
    background: url(../images/navigation.jpg) no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    height:210px;
    padding:10px;
    z-index:999;
}
    nav ul{
        list-style-type:none;
        margin:0;
        padding:0;
    }
        nav ul li{
            display:inline;
            font-family: 'ralewaysemibold';
            font-size:24px;
        }
            nav ul li img{
                width:36px;
                height:36px;
            }

#stop_motion
{
    background: url(../images/bg_stop_motion.jpg) no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    z-index: -999;
    min-height: 100%;
    width: 100%;
    height: auto;

    padding-top:150px;
    z-index:-1;
}

This is how it looks now:

enter image description here

But I want to have the second div under the first navigation. Not the whole 100% height but like 100px. I've tried adding margin-bottom: -110px; to the nav but then I get a result like this:

enter image description here

The second is div is just on top of the first, and it should be the other way around. How can I fix this?

UPDATE:

I've updated my CSS like this:

nav{
    background: url(../images/navigation.jpg) no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    height:210px;
    padding:10px;
    z-index:100;
    position:absolute;
    left:0px;right:0px;
}

#stop_motion
{
    background: url(../images/bg_stop_motion.jpg) no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    z-index: -1;
    min-height: 100%;
    height: 100%;
    width: 100%;
}

But now I get something like this:

enter image description here

I've also put it online so it makes it easier. (http://beachteamvandenbroecke-engels.be/)

The end result should look like this: enter image description here

Upvotes: 1

Views: 646

Answers (5)

user3688978
user3688978

Reputation: 51

For .nav change the css

.nav{
    height:210px;
    padding:10px;
    z-index:100; /* higher z-index */
    position:absolute; /* to remove the nav from the flow of elements */
    left:0px;right:0px; /* to make the nav full width*/
}

Change the css for #stop_motion to this

#stop_motion {
    margin-top:230px; /* to bring the container below the nav, (is height of nav + top and bottom padding for nav) */
    z-index: -1; /* lower z-index*/
    min-height: 100%;
    width: 100%;
}

Demo

In response to your update, I can see two problems,

nav{
    background: url(../images/navigation.jpg) no-repeat; 
    /*..more code..*/
}

1st. To remove that white background around the navigation, convert your background image to png or gif with transparency using an image editing software like Photoshop.

2nd. As nav is now position:absolute; it is out of the flow of the regular document structure, so the elements following it are going to begin from under it, to adjust for that you have to set its margin-top or padding-top.

#stop_motion {
    margin-top:230px; /* to bring the container below the nav, (is height of nav + top and bottom padding for nav) */
    /*..more code..*/
}

or 

#stop_motion {
    padding-top:230px; /* to bring the container below the nav, (is height of nav + top and bottom padding for nav) */
    /*..more code..*/
}

As I see from the sample image of the result you have provided, using padding-top is more suitable.

jsfiddle Demo
Online Image Editor pixlr.com

Upvotes: 0

pavel
pavel

Reputation: 27082

If you want to use z-indexes, element has to be positioned (position: relative/absolute/fixed).

When element has default position: static, z-indexes are ignored.

Upvotes: 0

Hristo Georgiev
Hristo Georgiev

Reputation: 2519

The second div can have this markup:

{
 position: absolute;
 top: 210px; /*height of your nav*/
 left: 50%;
 margin-left: -50px ; /* half of the div's width, must be a negative value. This is for centering purposes*/
 width: 100px;
 z-index: 100 /* more than the background's z-index*/
 }

Let me know if it works

Upvotes: 2

Pixel Rubble
Pixel Rubble

Reputation: 1101

You could give the second div an absolute position, with a top of 100px and a z-index that's higher than the first.

Upvotes: 0

Uzair Hayat
Uzair Hayat

Reputation: 540

According to your question, I understand that you want the second div -under- the first. While your code shows: 

#stop_motion {
    z-index: -999;
}

How about changing it to 

#stop_motion {
    z-index: 998;
}

This would bring it above the first

Upvotes: 0

Related Questions