HTML and CSS Reference
In-Depth Information
Resetting Layout
One of the first things you should consider with a print layout is resetting any layout mecha-
nisms you've used for the screen view. This involves removing floats, absolute positioning,
padding, and margins. You may want to go through each element and create a print alterna-
tive for each, but that may take time. We suggest using the old “sledgehammer-to-crack-a-nut”
approach: apply several styles to several different elements in one go, and then deal with the
exceptions.
Our travel web site is a good example that we can now prep for print. First things first; let's
link to the necessary CSS files:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
➥
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TravelGo.com - Getting you there since 1972</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="basic.css" rel="stylesheet" type="text/css" />
<!-- which imports the advanced.css file -->
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
</head>
Here's the first part of the print CSS for this site. As you can see, we list all the elements
that have been manipulated in one way or another and then reset the CSS back to basics:
body, div, img, h1, h2, h3, ul, ol, li, a, form {
position:static;
float:none;
padding:0;
margin:0;
}
This won't fix all the problems for the print view, mainly because of specificity reasons
(remember reading about that as far back as Chapter 3?). Some of the rules in the main style
sheet have a higher specificity and so, despite our redefinitions in the print CSS, the generic
styles previously declared are more specific. So, we'll need to add some selectors to target
those elements and they must have the same (or greater) specificity (see the additions in
bold):
body, div, img, h1, h2, h3, ul, ol, li, a, form,
div#breadcrumb,
div#header,
body#cols3 #content-wrapper {
position:static;
float:none;
padding:0;
margin:0;
}
