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?
A:
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.
ben_h
2009-03-11 04:44:50
So there is no way to do it with css right? I do know the height of the bar, but I don't know whether or not it appears, is there no way to check with css?I'm just shooting from the hip but perhaps creative uses of css selectors? Anyone?
2009-03-11 06:07:18
A:
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
Konrad
2009-03-11 05:19:56
+3
A:
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
Michiel
2009-06-19 18:58:23
A:
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 (+).
ajm
2009-06-19 19:06:33