get free code

As for as web pages are concerned we just have to put some extra items into pages like ads etc. But if some one tries to print out web page it will be good idea to remove the ads and some extra items like menus etc from the printed version.

In this regard css gives us facility to code in a way that some items display on our web page but when some one prints the page through printer those items will not be printed in page on useful content will be printed.

See following css code.

@media print
{

#np{ display:none;}
#contentArea{ width:100%;}
}

@media print tells the browser that you have to consider this in case page is being printed or print preview is being viewed. Styles inside brackets of @media print will now be applied to normal page. Now lets see how to implement.

First step is to paste the code above to your css file or between the css script tags in header section of your webpage.

Now all the items you dont want to print put a div tag around them and put the id="np" inside opening tags. This will apply the np style given above to item and it will not be printed. In case of table or paragraph p tag you can simply put the id="np" attribute to opening tag like

This will prevent that paragraph or table from printing.

Now if you have choosed to not to print a side menu while printing the space will be left blank which will not look very nice. What you can do is put a div tag around useful content to be printed and assign it an id #contentArea and according to above defined style of content area the content of content area will be printed on the full widht with no extra space leaving which will make layout bit nice.

This wonderful thing may please your visitors by not printing extra ads and menus while they are printing your webpage for some reason.