Tutorial 24: Fixing Frames with Fixed Positioning

The finishing touch

Of course, layout isn't everything when it comes to a style sheet, so I've added another bunch of rulesets to make our page look better.

BODY {
 background-color: #FFFFFF;
 color: #000000;
}
A:link { color: #8B7CFF }
A:visited { color: #483ACE }
A:active { color: #CC0000 }
H1, H2 {
 font-family: Arial, Hevetica, sans-serif;
 font-style: italic;
 font-size: 120%;
}
H1 {
 margin-top: 0;
 font-weight: bold;
}

/* Gecko doesn't inherit this */
#navigation, #intro, #news, 
   #copyright { background-color: #FFFFFF; }

#navigation P {
 text-align: center; 
 margin: 0;
}
#copyright P {
 margin: 0;
 font-size: smaller;
 text-align: right;
}

Some interesting notes on this style sheet: First of all, I have revealed a little bug in Gecko, since the fixed elements should have a transparent background, but actually look gray, so I've explicitly set their background to white (I've reported this bug, and expect it be fixed by the time Navigator 6.0 and Mozilla 1.0 are released).

Also, I've set the margins of the paragraphs in both the navigation and copyright sections to 0 so that they can fit into the 1.4em and 1.2em heights we've given them respectively, giving us a nice, compact layout. I've also set the top margins of the two H1 elements to 0 so that they sit at the very top of their frames.

Adding some stylistic touches like fonts and colors to the element's contents gives us some very pleasing results.

Jun	JUL	Aug
	02
2009	2010	2011

Tutorial 24: Fixing Frames with Fixed Positioning

The finishing touch

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos