Jump to content

Print friendly pages wont work


joanne

Recommended Posts

I have tried to make my pages print friendly using the below code:body { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }a { text-decoration : underline; color : #0000ff; }#navigation, #advertising, #other { display : none; }Then saved it as print.css in the same directory as the fileand used the link <link rel="stylesheet" type="text/css" href="print.css" media="print" /> in my head section of my page code, but it will not work for me this way.Can anyone suggest any ideas as to why this wont work for me?Joanne

Link to comment
Share on other sites

Glancing over this page from W3C, it looks like you should have functional code. Can you perhaps give us a link to the file(s) in question that we can look for ourselves? It could be a problem with the (X)HTML as much as the CSS.

Link to comment
Share on other sites

Have you tried declaring all divs separately? The rest looks like something I should try for myself some time. Also: if you apply other divs in your html code they should be mentioned in your css as well. (never tried it but I guess undeclared divs don't show up in your browser.)

Link to comment
Share on other sites

<!-- #include file = "../../includes/leftHandNav.asp" --> <li><a href="R home.asp">R home</a></li> <li><a target="_blank" href="retail%20list2.pdf">Bonus List</a></li> <li><a href="posters.asp">Posters</a></li> <li><a href="faqs.asp">FAQs</a></li> <li><a href="cheques.asp">cheques</a></li> <li><a href="info">Sign in</a></li> <li><a href="calander.asp">Calendar</a></li> <li><a href="terms.asp">Ts & Cs</a></li> </ul>This is the section which I dont want to appear when it is printing, as it appears as my left hand navigation menu and takes up too much of the printed page, is this any help to see what i need to put into my code?How would I alter the code to declare all divs seperately?Would i put <div><li> at the top and </ul></div> at the bottomAlso would I alter part of this section of the css, below#navigation, #advertising, #other { display : none; }Thanks Joanne

Link to comment
Share on other sites

wrap all of that HTML in

<div id="navigation"><!-- #include file = "../../includes/leftHandNav.asp" --><ul><li><a href="R home.asp">R home</a></li><li><a target="_blank" href="retail%20list2.pdf">Bonus List</a></li><li><a href="posters.asp">Posters</a></li><li><a href="faqs.asp">FAQs</a></li><li><a href="cheques.asp">cheques</a></li><li><a href="info">Sign in</a></li><li><a href="calander.asp">Calendar</a></li><li><a href="terms.asp">Ts & Cs</a></li></ul></div>

Link to comment
Share on other sites

Take advantage of @media This should do what you want for all browsers:<style>@media Print{ div#navigation { display:none }}@media Screen{ div#navigation { display:block}}</style><div id="navigation"><ul><li><a href="R home.asp">R home</a></li><li><a target="_blank" href="retail%20list2.pdf">Bonus List</a></li><li><a href="posters.asp">Posters</a></li><li><a href="faqs.asp">FAQs</a></li><li><a href="cheques.asp">cheques</a></li><li><a href="info">Sign in</a></li><li><a href="calander.asp">Calendar</a></li><li><a href="terms.asp">Ts & Cs</a></li></ul></div>

Link to comment
Share on other sites

Ive tried to use this but it just made the nav bar dissappear in both screen view and print view, and it did not move the text to the left to appear in the print page either, still quite lost on how to make this work, any help appreciated!Joanne

Take advantage of @media This should do what you want for all browsers:<style>@media Print{ div#navigation { display:none }}@media Screen{ div#navigation { display:block}}</style><div id="navigation"><ul><li><a href="R home.asp">R home</a></li><li><a target="_blank" href="retail%20list2.pdf">Bonus List</a></li><li><a href="posters.asp">Posters</a></li><li><a href="faqs.asp">FAQs</a></li><li><a href="cheques.asp">cheques</a></li><li><a href="info">Sign in</a></li><li><a href="calander.asp">Calendar</a></li><li><a href="terms.asp">Ts & Cs</a></li></ul></div>

Link to comment
Share on other sites

The code posted by aalbetski works ok, i just tested it in IE and Firefox.It displays the list on the screen but prints nothing.

Link to comment
Share on other sites

so would this be correct....<style>@media Print{div#navigation { display:none }}@media Screen{div#navigation { display:block}}</style>and save this as print.cssthen put this in the head section:<link rel="stylesheet" type="text/css" href="print.css" @media="print" /> then put this did id around the nav text@<div id="navigation"><!-- #include file = "../../includes/leftHandNav.asp" --><ul><li><a href="R home.asp">R home</a></li><li><a target="_blank" href="retail%20list2.pdf">Bonus List</a></li><li><a href="posters.asp">Posters</a></li><li><a href="faqs.asp">FAQs</a></li><li><a href="cheques.asp">cheques</a></li><li><a href="info">Sign in</a></li><li><a href="calander.asp">Calendar</a></li><li><a href="terms.asp">Ts & Cs</a></li></ul></div>???

The code posted by aalbetski works ok, i just tested it in IE and Firefox.It displays the list on the screen but prints nothing.

Link to comment
Share on other sites

Not quite, save both these in the same folderprint.css

@media Print{div#navigation { display:none }}@media Screen{div#navigation { display:block}}

page.htm

<head><link rel="stylesheet" type="text/css" href="print.css" /> </head><body><div id="navigation"><!-- #include file = "../../includes/leftHandNav.asp" --><ul><li><a href="R home.asp">R home</a></li><li><a target="_blank" href="retail%20list2.pdf">Bonus List</a></li><li><a href="posters.asp">Posters</a></li><li><a href="faqs.asp">FAQs</a></li><li><a href="cheques.asp">cheques</a></li><li><a href="info">Sign in</a></li><li><a href="calander.asp">Calendar</a></li><li><a href="terms.asp">Ts & Cs</a></li></ul></div></body>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...