You may face some situations in which you have to print a part of html page or the content inside a block.This is pretty easy and you can do the same by some css tricks.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@media print {
body * {
display:none;
}
#print_div {
display:block;
}
}
</style>
</head>
<body>
<div>Won't be printed</div>
<div id="print_div">This gets Printed</div>
<div>Not printed</div>
</body>
</html>
<div>Won't be printed</div>
<div id="print_div">This gets Printed</div>
<div>Not printed</div> |
Copy and paste the above content in a notepad and save the file as “something.html”.Open the same in a browser.Once page is loaded press “Crtl-P”. On print preview itself you can see the magic.
The wonder is with the directive
@media print
which asks the browser to use the mentioned css for printing .That`s it..!
Stylan launches its first premium design.CSS driven cross browser designs
Free login screen template from stylan! Stylan launches, its first free template. Experience the cool soothing experience in the template