print modified web page without displaying it

I'm try开发者_如何学Pythoning to implement "print this page" on an e-commerce product page. It will be without needless sections like top navigation, footer, add to cart button etc. I want it to work like target.com http://www.target.com/Avalon-Vitamin-Moisture-Plus-Lotion/dp/B00120ZAYI/ref=sr_1_13?ie=UTF8&searchView=grid5&keywords=vitamins&fromGsearch=true&sr=1-13&qid=1305580954&rh=&searchRank=target104545&id=Avalon%20Vitamin%20Moisture%20Plus%20Lotion&node=1038576|1287991011&searchSize=30&searchPage=1&searchNodeID=1038576|1287991011&searchBinNameList=subjectbin%2Cprice%2Ctarget_com_primary_color-bin%2Ctarget_com_size-bin%2Ctarget_com_brand-bin&frombrowse=0

If you try to print it, only essential content gets printed. I'm confused how to implement it. Should I create a modified version of product page and print it without displaying it to a user? Please advise.

You're able to set a custom CSS page that has the header, navigation, footer or whatever you like hidden so when the user clicks print, the web browser looks at the print css and acts how you want it to.

Example of this is:

In the HTML

<link href="/css/main.css" rel="stylesheet" type="text/css">
<link href="/css/print.css" rel="stylesheet" type="text/css" media="print">

Under the attribute "media", print will only be used when printing it out.

In the CSS for main.css, could look like..

header { font-size: 32px; }
nav { font-size: 14px; }
footer { font-size: 10px; text-align: center; }

In the CSS for print.css, it can look like...

header { display: none; }
nav { display: none; }
footer { display: none; }

Basically, make a duplicate of the CSS you're using and just set display: none; to what you don't want to have printed.