HTML and CSS Reference
In-Depth Information
Note We are resetting some, but not all, values that were specified in the advanced style sheet. That
advanced style sheet was imported but had no media type specified. The style sheet will therefore automati-
cally apply to any medium, and what we're doing here is overriding some styles for print.
Another approach is to create two link elements in the document head: one that links to a screen CSS file
with the media="screen" , and the second file to the print CSS file. The problem with this approach is that
the print view is starting from scratch as it sees none of the styles applied for screen. You end up having to
come up with new styles. In our experience, it's easier to take the main style sheet (by not applying a media
type) and then reset the layout aspects for print as required.
Hiding Navigation and Other Interactive Elements
The next step is to identify what parts of the page can be removed entirely from print. In the
travel site, it would be the parts shown in Figure 13-1.
Figure 13-1. Navigation areas that have little use for print
If we hide these elements, we'll be left with just the page logo, the breadcrumb trail (which
we suggest be left in for print as it is an orientation device as much as it is a navigation device),
and the page content. It would have been easier, of course, to hide the header area as a whole,
but that would also cause the site branding to disappear. Therefore, we've suggested picking
out specific elements to hide and ones that should remain in the printout. To hide these cho-
sen elements, we can simply apply one rule as follows:
#headerlinks, #headersearch, #tablinks, #navigation, #related, #footer {
display:none;
}
With the layout aspects reset and all superfluous navigation items hidden, we end up with
the results shown in Figure 13-2 (which shows a print preview in Firefox). The print preview
facility is not always a perfect rendering of how it will appear on the printed page (there can be
Search WWH ::




Custom Search