Printer friendly page not working - still displays all divs

This site is best viewed in a modern browser with JavaScript enabled.

Printer friendly page not working - still displays all divs

tony_webb

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;

<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

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? [ATTACH]15671[/ATTACH]

The attachments of this post were removed during the platform migration in 2018

ryanbutler

W/out a live URL hard to diagnose. Give us one and it should be fairly simple to track down.

tony_webb

ryanbutler;1280001 wrote:
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

ryanbutler

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)

The attachments of this post were removed during the platform migration in 2018

tony_webb

ryanbutler;1280227 wrote:
. 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.

jedaisoul

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;
}

tony_webb

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.

tony_webb

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.uk/test/index-3.html

[ATTACH]15693[/ATTACH]

The attachments of this post were removed during the platform migration in 2018