How to Print Certain Part of my Web Pages

Discussion in 'HTML & Website Design' started by Webgold, Jun 10, 2010.

  1. #1
    Hi

    The main part of my web pages are contained in id=content.

    What I want to do is add a button that just prints the content within this part of the page and not the surrounding areas.

    Any ideas how I would do this?

    Thanks for any help!
     
    Webgold, Jun 10, 2010 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    First, make a print stylesheet that removes the surrounding areas. There are heaps of tutorials out there, like this one.

    Then, add a link to the print stylesheet, like this:
    <link rel="stylesheet" href="print.css" type="text/css" media="print" />
    Code (markup):
    Finally, add the markup for the print button, like this:
    <input type="button" onClick="window.print()" value="Print" />
    Code (markup):
     
    Cash Nebula, Jun 10, 2010 IP
  3. dlb

    dlb Member

    Messages:
    203
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    35
    #3
    To 'remove the surrounding areas' just simplify the text in '#content', then set the other structural elements to 'display:none;' or 'display:hidden;'.
     
    dlb, Jun 10, 2010 IP