using '@media print' prevent areas of page printing, how to do the reverse?

[jasonc]

<style type="text/css">
@media all {
  .page-break { display: none; }
}

@media print
{
  .page-break { display: block; page-break-before: always; }
}

@media print {
div.screenOnly { display: none; }
}
@media print {
div.noborder { border-width: 0px;  border-style: none; }
}

</style>


<div class="screenOnly">
this shows on the screen
</div>

<div>this is printed</div>

 

what I am wanting to do is have a reverse of this so that all the areas i contain within a given <div class="printerOnly"></div> is not shown on the screen but is ready to be printed, when the print button is pressed of course.  and all the other areas are not printed.

 

is this possible ?

[cssfreakie]

have a read here: http://www.w3.org/TR/CSS2/media.html

 

anyway to set stuff to print when printing you can use

 

div.printOnly { display:none; }
@media print {
div.printOnly { display: block; }
}

 

although I rather make a separate stylesheet for printing and than include it. most people are not very happy with printing out a colorful design.

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