CODEWITHSUNDEEP
css
Taler
Taler

Reputation:

What's the best way to do a fixed topbar that doesn't overlap the top?

For instance stackoverflow has a topbar for new members. The topbar is fixed and pushes down the page without overlapping the top of the page.

How is this accomplished?

Javascript? Or can this be done with just css?

Upvotes: 7

Views: 14837

Answers (4)

ajm
ajm

Reputation: 20105

Adapting Michiel's code to the OP's question in ben_h's response.

<style type="text/css">
body { margin: 0; }
div.header { position: fixed; height: 50px; width: 100%; }
div.content{ /* normal stuff here */ }

/*** Only selects div.content immediately preceded by div.header.
If div.header doesn't appear, it won't select. ***/
div.header + div.content { padding-top: 50px; }
</style>

<body>
<div class="header">header</div>
<div class="content">content</div>
</body>

I'll warn you that ol' IE6 isn't going to be too fond of that, but Dean Edwards's IE7.js will add support for the sibling selector (+).

Upvotes: 4

Michiel
Michiel

Reputation: 2634

You could do something like this to create a fixed header:

<style>
body { margin: 0; }
div.header { position: fixed; height: 50px; width: 100%; }
div.content { padding-top: 50px; }
</style>

<body>
<div class="header">header</div>
<div class="content">content</div>
</body>

Maybe check out the ie5.5 / ie6.0 fix here: http://www.howtocreate.co.uk/fixedPosition.html

Upvotes: 9

Konrad
Konrad

Reputation: 716

You should be able to do it with just CSS.

Here is a great article on how to create the "holy grail" of css design.

A page with three columns. One fixed width left sidebar for a menu, a right sidebar for your ads or photos and a scalable center that flows with the content.

See:

In search of the Holy Grail: CSS

Upvotes: 0

ben_h
ben_h

Reputation: 4694

If the bar is position: fixed, one way to prevent it overlapping content is to set a static height and then set a top margin on the main container with the same height.

If you don't know the height of the fixed div in advance, you'd have to use JS to discover its height and set the container margin accordingly.

Upvotes: 2

Related Questions