Solved

CSS - stationary div at the top of the page while the rest of the page scrolls.

Posted on 2008-06-21
4
904 Views
Last Modified: 2012-06-22
I'm building a page that will have a navigation bar that spans the top of the page.  The page will be 1024px wide, centered in the browser window and there is a background image that will show on both sides of the page for windows that show more than 1024px in width.  I want the navigation bar to remain at the top of the browser window regardless of scrolling the page up and down.  What needs to be done with the CSS for this to work?
0
Comment
Question by:josephdaviskcrm
  • 2
  • 2
4 Comments
 
LVL 12

Accepted Solution

by:
nexusnation earned 500 total points
ID: 21838630
position:fixed; top: 0;

That little bit of CSS will rest a block-level element at the very top of your page.

For more, see:
http://www.w3schools.com/css/pr_class_position.asp
0
 

Author Comment

by:josephdaviskcrm
ID: 21852233
Sorry it took so long to get back to this one.

Ok... this works great in everything but IE6 (wonder of wonders).  What needs to be done for it to work the same?
0
 
LVL 12

Expert Comment

by:nexusnation
ID: 21852693
Not a problem..
IE 6 doesn't support position:fixed, so you'd have to use some sort of a hack. There are various ways to do this, but I have never needed to try this, so the best thing would be to Google "position fixed IE 6".

Here's what I came up with that looked somewhat promising:

http://web.tampabay.rr.com/bmerkey/examples/fake-position-fixed.html
http://www.howtocreate.co.uk/fixedPosition.html
http://tagsoup.com/cookbook/css/fixed/
0
 

Author Closing Comment

by:josephdaviskcrm
ID: 31469457
Thanks.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
align Linkedin sign to the right page 5 67
Add box and text color changing for everything 1 44
Create tabs to show divs 9 41
Make footer stick to bottom 6 27
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question