The three subsequent rules, #content .itemDetails ul, .itemDetails
li, and .itemDetails li:first-child, style the lists in the itemContainer divs in pretty
much the same way as for the pull-navigation. The main difference is the white background
applied to the list items, which was added during the build stage in order to make
the item details stand out more (see the detail below). This sort of thing happens all the
time when I create sites??”mock-ups should always be more a guideline than something to
slavishly and exactly reproduce in the final site. If you can think of an improvement (and
the client is happy with it, if you??™re working on a commercial project), then make changes!
The remaining rules in this section are all straightforward. The .itemName, .itemCost rule
emboldens the text in the list items with the class values of itemName and itemCost,
thereby making the name and cost stand out more. And p.footer styles the footer paragraph.
In this rule, clear is set to both so that the footer clears the two floated columns,
and the text is aligned right. However, the footer also serves other purposes of a more
decorative nature. The background is set to white, an 18-pixel top border the same color
as the content background is defined, and negative horizontal margins of 18px are set,
along with padding of 18px. What this does is make the background of the footer white
and span the entire width of the content div, including its padding.
Pages:
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493