3

I really like how http://www.honorshaven.com/ looks printed (to pdf). I've looked through the source to try to figure out how they did it (my navigation always turns into ugly bullet lists on print...) -- and I'm at a loss. Anyone know? Any help would be awesome! Thanks, Martin

[Edit] I'm familiar with print stylesheets -- but aren't they mostly reached by a "print friendly"/"print me" link? In this case I'm just going up to the browser bar and choosing print. I'm sure I'm missing something stupid, but I don't know what...

3 Answers 3

8

You need to use a stylesheet designated for printing. To do this, set the media type to print instead of all or screen. In this separate stylesheet, you can hide your navigation menus, change your fonts, spacing, margins, etc. and it is specific to the print output.

Here's a great article on ListApart about CSS Print Stylesheets.

4
  • I'm familiar with print stylesheets, but it doesn't look like they have one? All I'm seeing on the homepage source is <link href="css/default.css" rel="stylesheet" type="text/css" /> <link href="css/homepage.css" rel="stylesheet" type="text/css" /> neither of which has any conditional stuff in it...
    – Martin
    Commented May 26, 2010 at 15:25
  • 3
    They're not doing anything special on that site to print. Not exactly sure what you're trying to do. The navigation on this site has the sub-menus hidden so they don't show up when printing either. If you're using stylesheets with media="screen" then your CSS won't apply to the printed output, maybe that's your problem? I think you need to focus more on your specific issues rather than this other site. Commented May 26, 2010 at 15:55
  • That was it! Thanks Shawn, I knew I was being dense. Cheers, Martin
    – Martin
    Commented May 26, 2010 at 16:22
  • No problem, glad to hear you fixed it. (You may want to accept the answer so your future questions are more likely to be looked at, fyi.) Commented May 26, 2010 at 18:14
1

You can specify which stylesheet to use for different media.

In this case, they implement a print specific stylesheet to handle styling everything for a printed page.

Check out this W3 page for the different media types available:

W3C - Media Types

1

if you really want to copy them don't declare your media in the link rel tag. Or better, just put media="all". That way all your styles will stay the same when you print your page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.