homepage Welcome to WebmasterWorld Guest from 54.205.247.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Print techniques with css
aroon




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

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?

 

swa66




msg:3940202
 1:26 pm on Jun 25, 2009 (gmt 0)

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;
}
}

aroon




msg:3940208
 1:34 pm on Jun 25, 2009 (gmt 0)

I have no idea how to begin this process.

Just copy and paste that code into my css file?

jameshopkins




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

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" />

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved