www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: print page section with CSS

  1. #1
    Join Date
    Feb 2006
    Location
    @ school in Texas
    Posts
    39

    Lightbulb print page section with CSS

    I want to use css to print only a certain section of a site I'm working on...can some generous person tell me how to do this?

    Thanks

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    Easy. First, import a print stylesheet to your HTML document by using the code below as an example:
    HTML Code:
    <link rel="stylesheet" type="text/css" media="print" href="/URL/to/your_stylesheet.css">
    And in that style sheet, use display: none; to hide the elements on your page you don't want printed. You'll need class names or IDs on the page elements you want hidden in print.
    Code:
    #footer,
    #nav {
     display: none;
    }
    The code above would hide two page elements, one with an ID of "footer" and the other with an ID of "nav."

  3. #3
    Join Date
    May 2004
    Posts
    39
    Here's an example that explains how it works:

    The CSS

    BODY {
    padding: 0px;
    background-color: White; /* set the background color to white. */
    font-size: 12pt; /* Convert text to points (pt) which is a printer friendly format. */
    }
    BODY, FORM {
    margin: 0px;
    }
    /* Now we want to hide the layout elements we don't want to print. */
    DIV#Header, DIV#NavBar, #LeftColumn, #Footer {
    display: none;
    }
    /*
    The ID="Content" is nested within the ID="RightColumn" and so we cannot set the ID="RightColumn" display to none. Additionally we need to overide the ID="RightColumn" styles set in the Style.css.
    */
    #RightColumn {
    margin: 0px;
    padding: 0px;
    border: none;
    }

    DIV#Content {
    margin: 0px;
    padding: 0px;
    width: auto;
    float: none !important;
    border: none;
    color: Black; /* set the text color to black */
    background-color: White; /* set the background color to white */
    }
    A:link, A:visited { /* no need to set active or hover */
    background-color: White; /* set the background color to white */
    color: Black; /* set the link text color to black */
    text-decoration: underline;
    font-weight: bold;
    }
    H1, H2, H3, H4, H5, H6, CAPTION {
    background-color: White; /* set the background color to white */
    color: Black; /* set the header text color to black */
    padding-bottom: 1px; /* override the default padding so it's visually more associated to the text below it */
    border-bottom: 1px solid Black;
    }

    The HTML

    <div id="Header"></div>
    <div id="NavBar"></div>
    <div id="LeftColumn"></div>
    <div id="RightColumn">
    <div id="Content"></div>
    </div>
    <div id="Footer">Footer</div>

    You will need to adjust the div's to correspond to your document but look at the print CSS comments to understand why you want to set the font size to points, bg to white, width to 100% etc... It works awesome. And yes, like the response above, you will need to have an 'alternative' CSS for the printer function.

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

    After you get everything set up you just need to print the doc.

  4. #4
    Join Date
    Oct 2005
    Location
    Gold Coast, Australia
    Posts
    2,115

  5. #5
    Join Date
    Feb 2006
    Location
    @ school in Texas
    Posts
    39
    thanks...Perhaps I haven't done something properly...when I print, nothing shows up... the other thing, is it a problem if I already have a stylesheet (embedded) and I'm now trying to link another to the same document?

  6. #6
    Join Date
    May 2004
    Posts
    39
    Fembot...

    W/O seeing your code I can't tell but I would recommend that you move your CSS into an external document and link to it. It also sounds like you have set the display: none on something that is then hiding everything. Keep in mind that if you set the display to a DIV, all elements withing that DIV including other DIV's will be hidden as well.

    There's two ways to test this.

    1) Use the print preview from your browser.
    2) Link to the "printer" CSS only and then browser view it.

    Cheers...

  7. #7
    Join Date
    Feb 2006
    Location
    @ school in Texas
    Posts
    39

    Question

    another thing...i don't know--maybe it's not possible because the area I want to print is inside of about two tables--and those have content that i do not want to print--it's not possible put div tags in the middle of all that (is it?)
    argh...if anyone is still feeling helpful and wants to see some code, I can post it but i warn you, it is LONG

  8. #8
    Join Date
    May 2004
    Posts
    39
    Fembot...

    Yes, that is the issue. So in this example this is how you could do it:

    HTML

    <table class="Table">
    <tr>
    <td class="NoPrint">Don't print me!</td>
    <td class="Print">Print me!</td>
    </tr>
    </table>

    CSS

    TD.NoPrint {
    display: none;
    }

    TD.Print, TABLE.Table {
    margin: 0px;
    padding: 0px;
    border: none;
    width: auto;
    }

    The idea is that you let the printer auto format the page. When you try to force the poge size and the page styles you usually end up with a messy printer page.

  9. #9
    Join Date
    Feb 2006
    Location
    @ school in Texas
    Posts
    39
    Quote Originally Posted by Norsk
    Fembot...

    Yes, that is the issue. So in this example this is how you could do it:

    HTML

    <table class="Table">
    <tr>
    <td class="NoPrint">Don't print me!</td>
    <td class="Print">Print me!</td>
    </tr>
    </table>

    CSS

    TD.NoPrint {
    display: none;
    }

    TD.Print, TABLE.Table {
    margin: 0px;
    padding: 0px;
    border: none;
    width: auto;
    }

    The idea is that you let the printer auto format the page. When you try to force the poge size and the page styles you usually end up with a messy printer page.
    yes, I believe you are a genius....I'm going to try it out now...thanks for taking the time to help me out!!! I'll post to let you know how it works

  10. #10
    Join Date
    Feb 2006
    Location
    @ school in Texas
    Posts
    39

    Talking

    Quote Originally Posted by Norsk
    <table class="Table">
    <tr>
    <td class="NoPrint">Don't print me!</td>
    <td class="Print">Print me!</td>
    </tr>
    </table>
    GREAT! It worked! now...one last thing...is there a way to further specify that I only want the nested table sitting inside that larger table cell to print? The top half of the table cell contains some content that I want to hide as well...
    hope this is possible...

    Either way, thank you SO much

  11. #11
    Join Date
    May 2004
    Posts
    39
    Yes, I should have mentioned this earlier. This is what I do: I create a class called: .NoPrint and then everything I don't want to print I assign this class to. You can do it like:

    HTML

    <p class="NoPrint">Don't Print this!</p>
    <div class="NoPrint">Don't Print this!</div>
    <span class="NoPrint">Don't Print this!</span>
    <td class="NoPrint">Don't Print this!</td>

    etc..

    CSS

    .NoPrint {
    display: none;
    }


    This works great to hide the "Print" button on the page for example.

    Keep in mind you can combine classes like: <div class="BlueText BoldText NoPrint">Blue bolded text that will not print!</div>

    Tim

  12. #12
    Join Date
    Feb 2006
    Location
    @ school in Texas
    Posts
    39
    Ok, I think I get it now...thank you--I've been at work beating my head against the screen over this for quite some time now! I really appreciate all the help...

  13. #13
    Join Date
    Feb 2006
    Location
    @ school in Texas
    Posts
    39
    is there a way to add an image/logo to the print version that doesn't show up in the regular page?

  14. #14
    Join Date
    May 2004
    Posts
    39
    Yes, do the exact reverse logic. Create a "NoPrint" and a "Print" CSS style.

    Printer CSS

    .NoPrint {
    display: none;
    }

    .Print {
    display: inherit;
    }

    Non printer CSS

    .Print {
    display: none;
    }

  15. #15
    Join Date
    May 2004
    Posts
    39
    Humm...

    Check that... the display inherit may NOT overide the display: none. Let me know but I think you get the drift.

    Tim

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles