Geek Answers Handbook

What is the best way to make a fixed top bar that doesn't overlap the top?

For example, stackoverflow has a top bar for new members. The top panel is fixed and moves the page without overlapping the top of the page.

How is this achieved?

Javascript Or can this only be done with CSS?

+6
css
source share
4 answers

You can 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>

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

+8
source share

Adapting Michelle code to the OP question in ben_h's answer.

 <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 warn you that ol 'IE6 will not get too involved with this, but Dean Edwards IE7.js will add support for the sibling ( + ) selector.

+4
source share

If the line is position: fixed , one way to prevent its content from overlapping is to set a static height, and then set the top edge of the main container with the same height.

If you do not know the height of a fixed div in advance, you will have to use JS to find out its height and set the container field accordingly.

+2
source share

You should only be able to do this with CSS.

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

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

Cm:

Finding the Holy Grail: CSS

0
source share

More articles:


All Articles