Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to print whole page

    I have a one page website: http://davespchelp.com
    I would like to print it to use as a flyer.

    What is needed in html/css so I can print the whole page with colors and all?

  • #2
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I was able to add this print link:
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="style.css" media="print" />

    Then I was able to in firefox go to Print > Options and check off colors and background so I was able to print the complete webpage for make copies.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Quote Originally Posted by vinoman2 View Post
    I was able to add this print link:
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="style.css" media="print" />

    Then I was able to in firefox go to Print > Options and check off colors and background so I was able to print the complete webpage for make copies.
    vinoman, you should be aware that screen layouts are not print layouts. You can and should create a different print stylesheet where you hide all the unnecessary stuff like navigation links etc. (people canít click links on a piece of paper).

    In your current case itís not that much of an issue because your page is very simple but also be aware that print layouts should be created with the same usability thoughts in mind as screen layouts. Therefore you should keep sizes (especially page measures) flexible, donít set a fixed size. Be aware that images and colors arenít necessarily being printed and floats and positioning can lead to problems with page breaks. And also be aware that different browsers also render print layouts differently as they do with screen layouts.

    I happened to create the print stylesheets for the ProStores website and if you look at this page and do a print preview youíll notice how the header navigation and the right sidebar are not being printed because thatís useless information if people print the page. They arenít interested in the navigation, they want the main info. And you might also notice how the signup buttons are hidden in the print layout because thatís also irrelevant for the printed document.

    So, for your print layout itís enough to display the page title (text only), the main text, the contact info, and maybe the footer, too.
    Read this article in A List Apart for more info on print stylesheets: http://alistapart.com/articles/goingtoprint/


  •  

    Posting Permissions

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