Hide Text From Printing

Question

Hello,

I have a print page here:

http://www.souq4cars.com/ppreview.php?id=611111161&u=10064&t=users%5Fcars

How do i hide the links at the bottom saying 'Close Window' and 'Print Page' from being printed on the printed page?

Answer 1

@media print
{
  div.for_hide {
    display: none;
  }
}

or you can include some css with this by including

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

in your html code.

Answer 2

You have to make a new style sheet which uses different css.

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

Name divs, where you have text, that you don't want to print:

<div style="float: right;" id="print">
    <a href="#" onclick="javascript:window.print(); return false;" class="orange_text"><strong>Print Page</strong></a>

   </div>

In style-print.css set this divs to hidden.

#print {
    display: none; 
}

Answer 3

You could use the CSS @media rule for this. To start, add a class noprint to the both elements:

<a class="noprint">foo</a>

and then add a @media print rule to your CSS which hides the elements during print:

@media print {
    .noprint {
        display: none;
    }
}

Answer 4

You should use a print stylesheet and hide the relevant elements there by setting display: none.

You can include a print sheet by adding the following between the head tags: <link rel="stylesheet" href="print.css" type="text/css" media="print" /> Normally you would set the media attribute to screen or something similar.