CODEWITHSUNDEEP
htmlcss
André Leria
André Leria

Reputation: 392

Facebook-like header / Top bar

I've been trying to compose this facebook-like top bar (or header, I don't know) with some CSS. I think it is pretty easy, and well, the first results indeed were.

I've set the bar with a fixed position, with its top and left properties set to 0. Its padding is set to 4px and it works great; Just as I wanted it.

But the question now is... what about the content? I could simply wrap it inside a <div> and relatively position it a few ems to its bottom. But then, wouldn't it hide the content's bottom in case of it surpassing the browser's max height? And also, that could cause some size incompatibilities with certain browsers (I hate IE).

I'm sorry if this has already been asked here, I could not find such question. And to be more clear, I do not want any kinda "dinamically-updating" headers -- at least not yet. And I think I can do that with some HTML5.

The main question here is: what is the best way of doing such header? Is the position: fixed the real way to go? And, if so, how is the best way of displaying the content?

TIA, André

Upvotes: 0

Views: 1631

Answers (1)

Madushan
Madushan

Reputation: 7458

position:fixed will do.

Simple add margin to the top of your content. (same as the height of your header.)

So, when you're at the top of the page, your header will cover the margin. When you scroll down, it will behave as expected. And the browser will not hide the bottom part.

Upvotes: 2

Related Questions