Using CSS and ‘display: none’ to control how your blog prints

A topic I’ve often discussed with other developers at user group meetings is the use of CSS to control how web pages print.

As well as content, many web pages also contain extra elements like menus and navigation links that only make sense on screen. Often when we print a web page, we will want to print just the content and leave out menu and navigation elements. This has particularly been an issue for many of my SharePoint Portal Server sites.

A couple of weeks ago, I was asked about this again and I thought “I should really blog this.” Pangs of guilt reminded me that I hadn’t actually cleaned up my own blog to suppress the sidebar when printing. Last night, I finally got around to fixing my blog’s CSS to do this. In your browser, select File, Print Preview to see how this blog page will print. Note that there is no sidebar. If you are viewing just this one post, there are no top navigation links to next and previousposts and no “Leave a Reply” form.

So how is this done? Three techniques which I have used to control how web pages look when printed are:

Link to a separate Print CSS style sheet
Include an “@media print” section in the existing style sheet, and
Include an in-line style in the HTML.

1 Link to a separate Print CSS style sheet

This is the technique I have used on this blog. Have a look at the source of this page (View Source in Internet Explorer) and note that in the <head> there are two <link> tags linking to separate CSS style sheets, one applies when viewing this page on screen (media=”screen”) and the other applies when printing (media=”print”)


<link rel="stylesheet" href="http://brisgeek.com/mike/wp-content/themes/mikefitz/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://brisgeek.com/mike/wp-content/themes/mikefitz/styleprint.css" type="text/css" media="print" />

Further down in the <body>, the sidebar and navigation elements are contained in <div> tags. Note that there may be multiple navigation divs so we give them all a class of “navigation”. However, there is only one sidebar, so it can have an id of “sidebar” like so…


<div class="navigation">
    Navigation stuff, eg "Previous Entries" goes here…
</div>

<div id="sidebar">
    <ul>
        <li>Sidebar menu goes here…

Finally, the styleprint.css file contains many of the same styles as the screen version. However there is one important addition…


#sidebar, div.navigation {
    display: none;
    }

It is the display: none; which hides the sidebar and navigation.

I have used a slight variation on this technique on many websites including theFitzsimon IT Consulting website at www.fitzsimon.com.au.

Have a look at the source of this website and note the use of two <style> tags to import the separate screen and print stylesheets.

2 Include an “@media print” section in the existing style sheet

This second technique is one I have used on many SharePoint Portal Server sites where I cannot easily modify the HTML to include a second “print” style sheet. Very simply it involves creating an @media section in your existing style sheet as follows…


/* **** SCREEN Section */
/* Top Banner (incorporating Logo) on main Portal Pages */
.ms-bannerframe {
    background-color: #000066;
    border-bottom:1px #000066 solid;
    }
    /* other screen styles go here */

/* **** PRINT Section */
@media print {
    table.ms-bannerframe {
        display : none;
        }
    #SPSWC_NavBar {  /* Top nav bar on Portal pages*/
        display : none;
        }
        /* other print styles go here */

    }

3 Include an in-line style in the HTML.

This third technique is not really recommended, but I have to admit to using it when making a quick change to an existing website such as Fraser Island Luxury Beach House.

View the source of the Fraser Island website and note that I have included the following in-line style in the <head> tag of the HTML page.


<style media="print">
#leftnav, #bottomNav {
    display: none;
    }
</style>

Then do a File, Print Preview and note that the left and bottom navigation menus are not printed.

So there you go. Three techniques to suppress unwanted navigation and menu elements from your printed page leaving maximum room for your all-important content. Happy printing (and happy clients)!

————————————–
Update: 19 August 2006
I see from my stats that I have been getting a lot of hits on this post. Thanks for stopping by and please let me know if you find this information useful. (or not!) — Mike

This entry was posted on Monday, July 24th, 2006 at 10:15 and is filed underSoftware Development. You can follow any responses to this entry through theRSS 2.0 feed. You can leave a response, or trackback from your own site.

posted on 2015-08-14 15:23 haipsun 阅读(267) 评论(1) 收藏举报