CODEWITHSUNDEEP
htmlcssscroll
user3132508
user3132508

Reputation: 93

Content hides behind header after used HTML anchor tag

I just have a little problem here that i cannot fix it.

I am doing an one page website, I have 3 links on my navig bar, as soon as I click in one of them it should scroll down to a especific div, and IT DOES. But now it goes behind the fixed header I set.

HTML

<div class="header1">
            .... blablabla...
</div>

        <div class="navigbox">
            <div class="navig">
                <a href="#intro">About</a>  
            </div>
        </div>

        <div id="intro">                
                some text
        </div>

CSS

.header1{
    height: 20%; width: 100%;
    position: fixed;
    z-index: 1;
    left:0;
    right:0;
    top: 0;
    margin-left:auto;
    margin-right:auto;}

.navigbox{
    background: white;
    position: fixed;
    z-index: 1;
    height: 10%; width: 80%;
    left: 10%;
    top: 20%;}  

.navig{
    height: 100%; width: 33.33%;
    float:letf;}    

#intro{
    background: white;
    height: 60%; width: 70%;
    left: 10%;
    top: 30%;
    position: absolute;
    padding: 5% 5% 0 5%;}

Upvotes: 0

Views: 1503

Answers (3)

eritbh
eritbh

Reputation: 796

That's because the height of the header isn't considered when the page scrolls. Instead of applying the id to the div itself, put another element, say an a, before it and seperate the two with a couple br's.

Edit: This answer has a better way of doing it.

Upvotes: 0

Taj Melic
Taj Melic

Reputation: 33

In the CSS the other elements are overlapping the header1 because they have a higher or equal z-index. Set the z-index of header 1 higher rather than one

Upvotes: 0

peterjb
peterjb

Reputation: 819

As an alternative to George's answer, you could add the space you need by applying margin to the top of the first element inside your divs. That way you don't need any extra elements. It's going to be tricky to get it exactly the way you have it though because padding %, both top/bottom and left/right, is computed relative to the width of the parent, whereas height % is obviously relative to the parent's height.

Upvotes: 1

Related Questions