Welcome to WebmasterWorld Guest from 23.20.241.155

Forum Moderators: not2easy

Message Too Old, No Replies

Print techniques with css

     
1:17 pm on Jun 25, 2009 (gmt 0)

5+ Year Member



I have a coupon on my site and I have a "click to print" button. I wanted the click to print button to only print the coupon. But my whole page is being printed. I was told that I could use CSS to accomplish this. How?
1:26 pm on Jun 25, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



CSS can remove things from print, but it would affect *ALL* printing of the page, not just the one from that button.

Either you can add a print CSS file using or in your existing CSS you can simply add (more inspired on one of my own pages than anything else:


@media print {
h1.title {
padding: 0;
}
.caption, .navigation, .search, #crum, .ads {
display:none;
}
}
1:34 pm on Jun 25, 2009 (gmt 0)

5+ Year Member



I have no idea how to begin this process.

Just copy and paste that code into my css file?

1:56 pm on Jun 25, 2009 (gmt 0)

5+ Year Member



I wanted the click to print button to only print the coupon

I'd suggest that the button links through to a new coupon-specific page, then you would be able to print the coupon in the same way you print an entire page.

I have no idea how to begin this process.

The 'print' media descriptor that swa66 has given an example of, means those selectors within the construct ('h1.title', '.caption', etc) only apply when you print out a page (otherwise known in the CSS world as 'paged media'). If you are using @media rules, then you need to identify the media descriptors ('print', 'screen') you'll be using in conjunction with @media rules within that stylesheet, since you'll be defining specific media types within the stylesheet itself using @media rules. The example should be fairly self-explanitory once you deconstruct it

<style type="text/css" media="all">
div:after{
content:'This is for all media types';
}

@media print{
div:after{
content:'This is for the print media type';
}
}

@media projection{
div:after{
content:'This is for the projection media type';
}
}
</style>

You can add swa66's snippet to an existing stylesheet. As well as this method, you can create an entirely new stylesheet just for 'print' by specifying the media descriptor in the 'media' attribute within a LINK declaration like:-

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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month