Tutorial 24: Fixing Frames with Fixed Positioning - HTML with Style | 9

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]

Next Page...

https://www.internet.com/

URL: https://www.webreference.com/html/tutorial24/8.html

Produced by Stephanos Piperoglou
Created: August 24, 2000
Revised: August 29, 2000