Key References
w3schools,
Articles
Snippets
Featured article:
The big keys to this approach working are
highlighted. I just did this for an engage site and
tested it in IE,FF,O,Ch, and Safari all with equal success.
You should be able to do the same thing by setting up this
structure and then in the print.css display:none on the parts you
don't need and display:block on the parts that you do (see
below). That may be a bit extreme and you'll need to check
how other pages print if we do this site-wide through the
theme. Worst case we may need to include the print.css
directly in the user control it applies to so that other pages on
the site still print properly.
@media print {
body { display : none; }
content { display : block }
}
Consider the following html/aspx page:
index.html
<html>
<head>
<link rel="stylesheet" href="/css/screen.css"
media="screen" />
<link rel="stylesheet" href="/css/print.css"
media="print" />
</head>
<body>
<div id="head">
<div id="head-logo">
<img src="logo.gif" />
</div>
<div id="nav">
<ul>
<li><a
href="/>home</a></li>
<li><a
href="/Contact+Us.aspx">Contact Us</a></li>
</ul>
</div>
</div>
<div id="content">
ARTICLES AND CONTENT HERE
Lorem Ipsum blah blah blah
</div>
</body>
</html>
Consider styles.css (think of this as all the styles you
probably already have on your site)
/* Elements */
body { font: 12px/1.5 Arial, sans-serif; text-align: center;
background: #FFF; color: #555; }
a { color: #069; font-weight: bold; text-decoration: underline;
overflow: hidden; }
a:hover,a:focus,a:active { color: #000; text-decoration: underline;
}
a:focus,a:active { overflow: hidden; }
h1,h2,h3,h4,h5,h6 { margin: 0 0 15px; font-size: 26px;
line-height: 1em; color: #000; }
h1 { font-weight: normal; letter-spacing: -1px; }
h2 { font-size: 20px; letter-spacing: -1px; }
h3 { font-size: 16px; letter-spacing: -1px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 10px; }
…
Consider screen.css
/*
Author: Craig Erskine
Description: Load Style Sheets, Filter Out Old Browsers
*/
@import "styles.css";
Consider print.css
/*
Author: Craig Erskine
Description: Load Style Sheets, Filter Out Old Browsers
*/
@import "styles.css";
@media print {
#head-name { display: none; }
#head-logo { display: block; }
#head-desc { display: none; }
#head-search { display: none; }
#nav { display: none; }
#nav ul { display: none; }
#nav-sub { display: none; }
#foot-nav { display: none; }
.breadcrumbs {display: none; }
}