www.webdeveloper.com
Results 1 to 8 of 8

Thread: Printer friendly page not working - still displays all divs

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    Printer friendly page not working - still displays all divs

    I am trying to create printer friendly pages for my website. Unfortunately the css file doesn't work at all when i select print to preview the page.

    These are the html links that I am using;
    HTML Code:
    <link rel=”stylesheet” type=”text/css” href=”http://what-do-christians-believe.co.uk/test/print.css” media=”print” />
    <link rel=”stylesheet” type=”text/css” href=”http://what-do-christians-believe.co.uk/test/print.css” media=”screen” />
    This is the code for my print.css file

    Code:
    body {
        background-color:#FFFFFF;
        color : #000000;
        }
    
    #guide{display:none;}
    #guidelinks{display:none;}
    
    h1{display: none;}
    
    h2{ text-align: center;
        font-family: arial;
        font-size: 1.30em;
        color: black;
    }
    h3 {text-align: center;
        font-family: arial;
        font-size: 1.17em;
        color: black;
    }
    #title{text-align: center;
           font-family: arial;
           font-size: 1.17em;
           color: black;}
    
    #container {display: none;}
    #container-2 {display: none;}
    #mobile-photos {display: none;}
    #main-back {display: none}
    #main-box {display: none;}
    
    #texted-1 {
        background-color:#fff;
        font-family: arial, sans-serif;
        font-size: 1.25em;
        color: black;
    }
    #linkd {display: none;}
        
    #foot-menu {display: none}
    
    #drop-down {display: none;}
    All I am wanting to print is the H2 heading in #title and texted-1

    When I right click to print the whole url is shown in the preview.

    The attached screen print shows the print preview as it is. What i want to see is the sub heading in black (not blue) and the text in the large text box below the image starting this site will ...

    What do I need to do to get the print preview to show just the text that is highlighted in this screen print? print friendly.jpg

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    W/out a live URL hard to diagnose. Give us one and it should be fairly simple to track down.
    Ryan Butler

    Ryan Butler.org

  3. #3
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Quote Originally Posted by ryanbutler View Post
    W/out a live URL hard to diagnose. Give us one and it should be fairly simple to track down.
    Thanks for your reply;

    The url is here www.what-do-christians-believe.co.uk/test/index-3.html

  4. #4
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Ok, a few things to get it going:

    1). You have put your print styles in your main style sheet file, w/ a declaration of @media print. Your title is hidden because of this line in the file:

    #title{display:none;}

    So remove that rule and your title will show back up. I would recommend taking the @media print out of your main style sheet file that's being used for the screen and place in a separate style sheet targeted to print media. Also, your title div tag doesn't have a closing tag, so I added one, and that allowed only the sections you wanted to show up. You need to double check the rest of your html file to be sure you're properly opening and closing your html elements. Also, I would recommend at some point to quite absolute positioning everything. Right now, most of your html elements don't know each other exists b/c they are being taken out of the flow of the document. Normally you float left elements when you need to and keep everything else in the normal flow of the document. I've included my test files as a baseline for you.

    HTML file (home.txt), screen styles (test_main.txt) and print styles (test.txt)
    Attached Files Attached Files
    Ryan Butler

    Ryan Butler.org

  5. #5
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    Smile

    Quote Originally Posted by ryanbutler View Post
    . Also, I would recommend at some point to quite absolute positioning everything. Right now, most of your html elements don't know each other exists b/c they are being taken out of the flow of the document. Normally you float left elements when you need to and keep everything else in the normal flow of the document.
    Thanks for your reply and help. I'll work on it tomorrow as I am busy today.

    The above is an interesting comment. I bought a book to learn HTML and that says to use relative and absolute. However I do get the occasional problem where the buttons appear out of place.

    I will try what you have suggested about using float. Hopefully that will resolve the issue.

  6. #6
    Join Date
    Mar 2012
    Posts
    1,122
    Position absolute is particularly useful with reactive pages as it solves problems like: "I want a main text area to the right, with fixed width side panel of, say, 200px irrespective of the display width and a 20px footer area that stays at the foot of the page". The code:

    #sidepanel {
    position: absolute;
    top: 0;
    bottom: 20px;
    left: 0;
    width: 200px;
    }
    #maintext {
    position: absolute;
    top: 0;
    bottom: 20px;
    left: 200px;
    right: 0;
    }
    #footerarea {
    position: absolute;
    bottom: 0;
    height: 20px;
    left: 0;
    right: 0;
    }

  7. #7
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Thanks for your reply. I'll be playing around over the weekend to see what happens with the css. I'll post if i have problems.

  8. #8
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    I have made some changes and created a separate print.css file. All works fine except the main text (texted-1) appears to right align and the last word or 2 is cut off in some places.
    I have tried text-align: left; but it doesn't move.
    I have attached the css file for you to use.
    the url is http://what-do-christians-believe.co...t/index-3.html

    print friend 2.jpg

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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