Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2008-06-21
4
901 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

860 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