Geek Answers Handbook

Hide HTML div when printing a page

I have an XHTML based page containing admin information. The administrator should be able to print the page, but I would like it to hide their information.

Is there a way to set the print area when printing a page or is it the only viable solution to open an additional page without administrator information when I click on the "Print" button?

Thanks!

+4
source share
4 answers

try the following:

<style type="text/css" media="print"> .dontprint { display: none; } </style> <div class="dontprint">I'm only visible on the screen</div>
+21
source

You can set the CSS for this div to display: none using the following:

 @media print { div.do-not-print {display: none;} }

It will display fine, but when you go to print, it will use this CSS class.

+8
source

Add print.css to your page, in which you will hide all the elements that you do not want to print.

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

the media = "print" attribute tells the browser to use a specific css file.

In this file you can have

 .admindetails{ display:none; }
+5
source

Of course, you can add another stylesheet for printing, see the example below.

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

or when you exit the stylesheet, you can add a media query

 @media print { .no-print {display: none;} }

And add the .no-print class where you don't want to print the HTML element

+1
source

More articles:


All Articles