Create CSS Stylesheet and JavaScript for Print
When we want to print out HTML page we need a lighter version of our HTML page. Basically, we don’t want to print the background images, background colors, advertisements and other things which are not relevant in printing. For this purpose, we need to specify a CSS stylesheet which browser use when we print our HTML page. We can also change the width and layout of our HTML page. We can specify our CSS stylesheet for print like this.
Print.php:
<html>
<head>
<title>CSS stylesheet for Print</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
</head>
<body>
<div class="coupon-mini">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="146" align="left" valign="top"><div class='default-coupon'><img src='/sites/default/files/coupon_116_116.'></div></td>
<td width="354" align="left" valign="top">
<h3 style="font-family: 'palatino linotype',palatino; line-height:18px; padding:6px 0 0 0; color:#0e549c; ">
Divan Restaurant and Hookah Lounge, Alabama
</h3>
<div class='coupons-text1'><span>McDonald 20% Off.</span><p>McDonald 20% Off.</p></div><br />
<div style="clear:both;"></div>
<div class="detail-basic1">
3125 Piedmont Rd NE, Atlanta, Alabama<br>
<strong> Phone Number :</strong> (404) 365-0410<br/>
<strong> Pincode:</strong> 30305 <div class="openhr1"><strong> Opening Hours:</strong> 6:30 PM to 01:00 AM</div>
<div class="web1">
<div class="lft1"><a href="#" class="about-web-link">http://www.divanatlanta.com</a></div>
<div class="rght1"><a href="#" class="about-mail-link">ajay0878@yahoo.com</a></div>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="print noprint"><a href="javascript:window.print();" class="coupon-print-link">Print this Coupon</a></div>
</body>
</html>
Print.css:
.noprint
{
display:none;
}
Style.css:
.header
{
width:800px;
height:200px;
}
IF U NEED CUSTOM PAGE BREAK
Advanced CSS Printing — Using CSS Page Breaks
I have one customer that absolutely insists his web pages print perfectly. Why? Because he refuses to look at his pages on the screen -- he tells his employees to print the website for him to look at. And since he looks at pages that way, he believes most of his customers do just this.
Needless to say, I've learned quite a few tricks to making a website print properly. I've already shared methods for making your website content printer-friendly, as well as making your website structure printer-friendly. One important aspect of making your pages printer-friendly is by using CSS/XHTML page breaks.
There are numerous spots that are good for page breaks:
* Between page sections (h2 or h3 tags, depending on your site format)
* Between the end of an article and subsequent comments / trackbacks
* Between longs blocks of content
Luckily, using page breaks in CSS is quite easy.
The CSS
The all and print medias should be addressed:
PRINT.CSS:
@media all
{
.page-break { display:none; }
}
@media print
{
.page-break { display:block; page-break-before:always; }
}
The first declaration ensures that the page-break is never seen visually...while the second ensures that the page break is seen by the printer.
The HTML
Creating a simple DIV element with the page-break class is how you implement the page break.
<div class="page-break"></div>
Quite simple, huh?
The Usage
<h1>Page Title</h1>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content -->
There you have it. The importance of page breaks in the web should not be understated, as many users still print content regularly. Also note that your content may be printed into PDF format and shared.
No comments:
Post a Comment