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.
Acme's framed homepage on Netscape Navigator 6.0PR2 [Full-sized image]
