scriptygoddessAwhile back there was a thread about how to have a "print version" of your site. I had done it with PHP, and people in the comments were talking about ways in which you could do it with CSS. Last night my brother showed me something he's working on (he's also in this field – java programming for the web. Next to him I'm a scriptydunce. LOL!)
The web site showed one thing, and when you went to print it, it showed something COMPLETELY different. NO WHERE on the page did you see the graphics that were being printed and vice versa. The answer is basically explained at the links that were in that comment thread (a list apart, NUblog) – but here's the Cliff Notes version…
** Calling the stylesheet based on whether it's for print or screen **
Where you're linking to your stylesheets you set up two versions (In a minute I'll get to what those actually look like)
<link rel="stylesheet" href="forprint.css" type="text/css" media="print" />
<link rel="stylesheet" href="forscreen.css" type="text/css" media="screen" />
** Defining the different stylesheets **
You'll probably have other styles as well depending on what other stuff you want to display, but here's the main ingredient:
Your PRINT css has this one:
.onscreen {
display: none;
}
Your SCREEN css has this one:
.onpaper {
display: none;
}
** Putting it all together **
put a DIV around the area you want to "hide" when you print:
