Solved

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

Posted on 2008-06-21
4
898 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

803 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