Your Electronic Books

Note in the p.footer rule that floated content still needs
clearing in the print style sheets.
The final section, images, is not changed much. The images within the columns were
deemed superfluous, and so display has been set to none for .columnLeft img,
.columnRight img. Elsewhere, the margins on the floated image have been set to values in
centimeters (cm) and the border value for #content img is in millimeters (mm), since we??™re
working in print. (Values in pixels are permitted, but they tend to be less accurate when
working with print style sheets??”for example, if elements have a one-pixel border, they
may not all be even when printed.)
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
394
One final thing that??™s useful to know is how to create print-only content. In this example,
removing the masthead from the print output has also removed the site??™s corporate ID. A
cunning way to bring this back is to create a black-and-white version of the company logo,
and add that as the first item on the web page, within a div that has an id value of
printLogo.

Then, in the main style sheet, create a rule that displays this element offscreen when the
page is loaded in a browser window.
#printLogo {
position: absolute;
left: -1000px;
}
The content will then show up in print, but not online.


Pages:
482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506