View Full Version : printer friendly page

02-13-2006, 11:20 PM
I am designing a website with top and left navigation bars.

I want to create a printer friendly page which removes the top and left nav bars and just prints the article and pictures on a 8.5"x11" letterhead paper in the standard TImes Roman 12pt. font.

How do I go about doing that without making a separate pdf page for each of the pages?

02-14-2006, 12:30 AM
This tutorial discusses how to do this: CSS Media types and printer friendly pages (http://www.javascriptkit.com/dhtmltutors/cssmedia.shtml).

02-14-2006, 10:29 AM
I have read all these articles and tried various ways but none seem to be working.

In fact, I even asked the people I bought a website from thinking that if I buy a website it would solve my problem. They have instructions but if you ask for help they do not guide you in any way!

Since I am new to this, would it be possible to get some more concrete instructions - like add this to the head or body? I'm trying to learn but have not mastered this part yet. I apologize.

02-14-2006, 11:23 AM
There are several ways to go about doing this sort of thing and they all rely on one's knowing at least basic css styling. A good resource for that is:

Blooberry css (http://www.blooberry.com/indexdot/css/propindex/all.htm)

and, perhaps even better in your case, for a tutorial:

w3schools css (http://www.w3schools.com/css/default.asp)

Here is their page on media types (http://www.w3schools.com/css/css_mediatypes.asp)

Basically style goes in the head though it can be anywhere usually or linked from an external file. To just begin to get the hang of it, stick to using it in the head. Observe the correct syntax as outlined in the tutorials and experiment. One tip that may be especially helpful, I hope, is - When you are testing to see the result of your printer specific styles, view the page in the browser to see how it will look live, then use the print preview option of the browser, rather than printing out the page each time, to see the effect of your printer specific styles.

02-14-2006, 01:29 PM
Also, a tip when using the CSS @media attribute to create printer friendly pages is to use the browser's "print preview" feature to see if you got it right. If so, the preview shot given by the browser should reflect how the page would actually look with the printer specific CSS applied and when printed.