Tips and Tricks
How to Print a specific Part of a HTML Page using CSS (@media:screen,@media:print)
Build Online Forms for your own Web Site !
Form Builder the HTML form creation software for Windows PC to create email
contact forms and
multi-page php forms with ease. Build HTML forms on your PC and upload the forms to your own web site.
The user can click on a link or button in the HTML page or form, e.g. add
the following HTML code:
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. The middle part can be e.g. the web form.
First we need to define the parts, this can be done using e.g. <div> tags.
this part of the page contains the part we want to print, e.g. the form
Now we define the CSS code
The specific CSS code can be defined directly in the HTML header or using a stylesheet file.
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".
<link rel="stylesheet" href="style-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="style-print.css" type="text/css" media="print">