joanne Posted April 27, 2006 Share Posted April 27, 2006 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 More sharing options...
mpoer Posted April 27, 2006 Share Posted April 27, 2006 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 More sharing options...
yoshida Posted April 27, 2006 Share Posted April 27, 2006 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 More sharing options...
Little Goat Posted April 28, 2006 Share Posted April 28, 2006 what browser do you use?I heard netscape doesn't support that.LG Link to comment Share on other sites More sharing options...
joanne Posted April 28, 2006 Author Share Posted April 28, 2006 <!-- #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 More sharing options...
mpoer Posted April 28, 2006 Share Posted April 28, 2006 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 More sharing options...
aalbetski Posted April 28, 2006 Share Posted April 28, 2006 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 More sharing options...
joanne Posted May 2, 2006 Author Share Posted May 2, 2006 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><{POST_SNAPBACK}> Link to comment Share on other sites More sharing options...
scott100 Posted May 2, 2006 Share Posted May 2, 2006 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 More sharing options...
joanne Posted May 2, 2006 Author Share Posted May 2, 2006 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.<{POST_SNAPBACK}> Link to comment Share on other sites More sharing options...
scott100 Posted May 2, 2006 Share Posted May 2, 2006 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now