Your Electronic Books

The thumbnailsContainer div contains an unordered list, each item from which contains
a linked thumbnail image, and an example of which is shown in the following code block:

Again, the various elements of the code are explained in the aforementioned exercises
from Chapter 5. The only difference here is the use of the list, which is used to provide
structure for the 18 images??”as you??™ve seen elsewhere in the book, CSS makes it possible
to style lists in any manner of ways.
Styling the gallery
The pictures-of-padstow.css document contains the styles for this layout, and these
styles are arranged into sections, as explained earlier in the chapter. The defaults section
includes two rules. The first is the universal selector (*), used to remove padding and margins
(as per the ???Zeroing margins and padding on all elements??? section in Chapter 2). The
second is a body rule with a commented-out background pair. If you remove the CSS comments
and load the web page into your browser, you??™ll see a background grid, as shown in
the following screenshot (the baseline grid??™s height is 20 pixels per line). It??™s worth leaving
PUTTING EVERYTHING TOGETHER
375
10
the rules in place when working with baseline grids, because if you make changes to your
page later, you can temporarily turn the grid back on to ensure rhythm is being maintained.


Pages:
456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480