How to Print

a specific Part of a HTML Page using CSS (@media:screen,@media:print)

The user can click on a link or button in the HTML page or form, e.g. add
the following HTML code:<a href="javascript:window.print()">Print</a>

The problem is, that the print command will print the whole page, which might
not be useable.The solution is to define 2 different CSS styles for the
screen and the printer, so that unwanted parts of the page will be hidden when
printing.

How it works:

The following sample should illustrate how easy it works!The page contains
3 parts: header, middle and footer and only the middle part should be printed.

First we need to define the parts, this can be done using e.g. <div>
tags.

...<div class="noprint">
page header</div>

...

this part of the page contains
the part we want to print, e.g. the form

...<div class="noprint">
page footer</div>...

Now lets define the CSS code

The specific CSS code can be defined directly in the HTML header or using
a stylesheet file.

<html><head>...<style
type="text/css"><!--

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

@media screen{...}

--></style>
...</head>...

The code above contains the code if you want to add the CSS code directly
to the HTML header. The class definition noprint sets display:none, so the
content will be hidden when printing the page. Its also possible to use a <span>, <p>
or <table> tag instead of <div>. Using ID will work the same way.

Thats all. An alternative would be to use 2 different CSS files (see below)

The following code shows how to use 2 different CSS files: one for
the screen and one for the printer

The usage is quite simple, make a copy of your CSS file and remove all the
unwanted parts using display:none; in the "style-print.css".

Disclaimer: The information on this page is provided "as is" without warranty of any kind.
Further, Arclab Software does not warrant, guarantee, or make any representations
regarding the use, or the results of use, in terms of correctness, accuracy, reliability, currentness, or otherwise.
See: License Agreement