Purpose We'll use fixed positioning to keep the navigation menu and a background image on the screen while content is allowed to scroll.

Preparation: Complete Meyer's Project 12: "Fixing Your Backgrounds." before attempting this task.

Fixing the navigation menu

Save a copy of your last page (task 5, CSS position) as 5_fixed_position.shtml. Replace the content with a dummy large header element followed by at least two screens full of lorum ipset (lipsum.com).

Change your CSS position for your navigation div to position:fixed. If necessary, adjust the offsets (top, left) so that the navigation is in a good permanent place on the screen. Also, if necessary, adjust the offsets of content or any other screen element so that there is no interference with the navigation when the screen scrolls. Check everything in a window that is reduced to approximate the size of a 15 inch monitor at medium resolution; you must be able to see the bottom of the navigation. You can? All done!

Fixing a background (2 options)

Using the same page (with the fixed positioned navigation and a couple of screenfuls of lorum ipset) try one of these two options, using a fixed background

Create a suitable background image for your page. Choose a simple design, one with little or no busy or distracting imagery under the readable portion of the content. Following online instructions for background images (to be posted 3/1/11), create a "smoky" version of the image to serve as the background for your navigation and content. Following the methods of Meyer Project 10, position the two background images, using fixed positioning, to recreate the effect of Meyer's Project 10.

...or...

Find or create a small logo image for your site (not very large: say, 100 x 100 px); save it in an images folder under your root directory. Create this folder if you do not already have one; keep all of your site images here. Make sure that you have uploaded your image to the server.

Within the CSS rule for your banner, add the logo as a background image. Position it to the left, with whatever top or left offsets that you need to center it on your banner and above your navigation. Make sure that it is no-repeat. Study Meyer Project 12 for ways to do this.

Style the banner div for position:fixed. Be certain that the banner has a background color (white or your current color choice) so that it is opaque. Give the banner div z-index:10 to get it above the plane of the page. When the rest of the page scrolls, it should disappear under the banner and not show through. If the rest of the page is not already in positioned divs, you may have to position or to adjust top margins to get the contents to display correctly when the page loads (i.e., so they do not re-flow under the banner.).