The #masthead rule defines
the thick, light gray border under the masthead, and #logo sets the masthead-background.
jpg image as a background for the logo div, along with setting the height of the div
(which is the same height as the image) and adding a one-pixel bottom margin (otherwise
the top border of the navigation items doesn??™t show).
Next, the #content rule sets 18 pixels of padding around the content area??™s contents, and
defines the background color as white (otherwise the dark gray page background would
show through). There??™s also a commented-out rule for the baseline grid image, added for
the same reason as in the Pictures from Padstow example (see the first paragraph of the
???Styling the gallery??? section, earlier in this chapter). Note that 18 pixels is the target baseline
grid line height for this design.
PUTTING EVERYTHING TOGETHER
389
10
Next, the hr rule styles the horizontal rule, making it light gray and ensuring that it takes
up a couple of ???rows??? in the grid (0.7em plus 2.9em is 3.6em, which because of the
standard text sizing used throughout this book equates by default to 36px??”twice the target
line height of 18px).
hr {
height: 0.7em;
margin-bottom: 2.9em;
background-color: #cccccc;
color: #cccccc;
border: none;
}
The final two rules in the section, .columnLeft, .columnRight (.columnLeft,
.columnRight is a grouped selector, not two separate rules) and .columnLeft, float the
two column divs, set fixed widths for them (equally, since this property is placed in the
grouped selector), and define a margin-right value for the left-hand column so that
there??™s space between the two columns.
Pages:
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499