If you do
this sort of thing, however, always remember where the various elements of the visual
design lie in CSS, and use comments to remind yourself, if you need to.
Anyway, onward. The #logo rule is much simpler, adding some padding at the bottom and
left of the div that houses the site logo. The reason for adding padding at the left is
because otherwise the logo would abut the browser window edge at a screen resolution of
8005600. The #content rule adds some horizontal padding, along with the columnstripe.
gif image as a vertically tiling background image (the aforementioned fauxcolumn
technique). Note the horizontal position of 27%. This is designed to sit roughly
within the margin to the right of the sidebar div??”see the following code block for the
width and margin-right values of the sidebar and mainContent divs. Logically, a value of
26% should be set, because that would be the width of the sidebar, plus half of the
margin-right value. However, the padding value of #content messes with that calculation
somewhat, because the two columns don??™t span the entire width that the content div
background occupies, since that stretches to the edge of the padding, which is 18 pixels on
each horizontal edge. A setting of 26% therefore results in the vertical stripe appearing too
far to the left; adding 1% results in a more pleasing position for the background.
#content {
padding: 0 18px;
background: #eeeeee url(assets/column-stripe.
Pages:
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489