Content is scrolling over header

#1

I have this html and css, where I have a header at the top, that stays at the top and I want to stay at the top

And I Have content below it

I have lots of text in the content.

The problem is that when I scroll the page, the content doesn’t stay below the header.

Years ago i’d have used frames and that problem wouldn’t exist. But I can’t see how to prevent it happening with divs.


<html>
<head>
 
</head>
<body>

<div id="header" style="position:fixed">
   
     
     <a href="#"><button>Home</button></a>
     <a href="#"><button>Current</button></a>
     <a href="#"><button>Future</button></a>

     <!-- <a href="services.html"><div class="button">Services</div></a>  -->
     
    
</div>


<div style="padding: 25px 0%" id="content" >


<h2>About Us</h2>
Pyxis is a small and faint constellation in the southern sky. The name comes from 
.....................................
spectroscopy.

</div>
</body>

</html>
#2

This is what you’re looking for: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

#3

Thanks. I have tried z-order and have been looking into this…

I actually think the header was staying above (which is what z-order would achieve),

But the contents is going through the header.

I think this is inevitable with divs. (Even with z-order, one passes through the other it’s just a question of which).

What I can do is

<body style="margin:0px">

(So that there’s no gap above the header so there’s no peep hole for people to see content passing through over the header!)

And

I found I can add a background-color to the header and a minimum width to 100%

<div id="header" style="position:fixed; background-color: grey; min-width:100%">

And then while the content still scrolls through the header, the background colour hides the content the content that goes beyond the header as it scrolls through it.

In the past we had Frames and with frames, you could have a navigation bar at the top, and in a bottom frame you could have contents, and you could scroll contents, and the navigation bar would stay in place, and it looked fine… because the contents were scrolling in their own page below the navigation bar.

Whereas with divs, if the navigation bar is fixed in place, and other content is below it, then when it is scrolled it doesn’t stay below it, it scrolls up through(either under or over, best under, the header). And the best one can do is hide the fact that it has gone through the contents above it, by giving the contents above it a solid background colour.

I think frames with a border is a much nicer solution but unfortunately not recommended anymore.

The best option now might (in a post frames word), might just be to not have the navigation bar the top stay on top… But to let it scroll off the screen with the rest of the content. It looks like that’s what people do nowadays since frames have been retired.

#4

We did have frames, I worked with them, they were horrible. Good riddance.

It really is a matter of preference. It’s merely a design choice. And the sort of UI/UX that you want for your users.

Some websites have the header fixed, with content scrolling “through”.
Some websites have the header disappear when scrolling down the page, and reappearing when scrolling up.
Some websites have the header scrolling with the rest of the page.
Some websites have the header fixed and the content under it fixed and scrolling (much like a frame).

The last one, I believe, is what you’re trying to achieve here.
And you’re in luck, it’s super easy to do.

Fix you header up top.
Have a container div for the main content of your page.
Set that div’s overflow-y to scroll.

And that’s it, you’re done.

#5

Thanks, that is brilliant

#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.