Hi,
I've got layout.css for the screen layout and print.css for the print layout.
What I would like to do, is have some text in my html file which is only viewable when printed. (contact details).
The layout.css looks like this:
#printfooter {display: none;}
.printtext{display: none;}
and the print.css looks like this:
#printfooter {margin: 1.3em 0.9em 1.5em 1em; }
.printtext{font : 10pt verdana, arial, helvetica, sans-serif; text-align: right; color : black; }
I reckoned that if its possible to use print.css to not print parts of a page, then it would work the other way round.
Can I have text which only appears on printing or am I asking for too much!?
PendleOriginally posted by pendle666
I reckoned that if its possible to use print.css to not print parts of a page, then it would work the other way round.
Can I have text which only appears on printing or am I asking for too much!?
Yes, and the obvious solution is to specify display:none in screen.css for the stuff you don't want on screen.So my theory is right, however I cannot get it to work.
Has anyone else been successful in doing this? If so, some tips and hints as to where I'm going wrong would be nice!I have been successfull with this. You are probably doing somthing wrong, but for me to guess what that is would take quite long. I suggest you post a link to you page instead.Here is a link to the test files:
<!-- m --><a class="postlink" href="http://www.raworths.co.uk/test/test.html">http://www.raworths.co.uk/test/test.html</a><!-- m -->
The file views as it should for on-screen - that is with the name, contact and disclaimer links on the right and a couple of images on the left.
However when using print preview and/or printing the file, the images and links have gone but the replacement text isn't there.
Thank you for your help.
PendleHi,
Try changing media="all" to media="screen" and it should work.
Paulthat's worked fine, thank you
I've got layout.css for the screen layout and print.css for the print layout.
What I would like to do, is have some text in my html file which is only viewable when printed. (contact details).
The layout.css looks like this:
#printfooter {display: none;}
.printtext{display: none;}
and the print.css looks like this:
#printfooter {margin: 1.3em 0.9em 1.5em 1em; }
.printtext{font : 10pt verdana, arial, helvetica, sans-serif; text-align: right; color : black; }
I reckoned that if its possible to use print.css to not print parts of a page, then it would work the other way round.
Can I have text which only appears on printing or am I asking for too much!?
PendleOriginally posted by pendle666
I reckoned that if its possible to use print.css to not print parts of a page, then it would work the other way round.
Can I have text which only appears on printing or am I asking for too much!?
Yes, and the obvious solution is to specify display:none in screen.css for the stuff you don't want on screen.So my theory is right, however I cannot get it to work.
Has anyone else been successful in doing this? If so, some tips and hints as to where I'm going wrong would be nice!I have been successfull with this. You are probably doing somthing wrong, but for me to guess what that is would take quite long. I suggest you post a link to you page instead.Here is a link to the test files:
<!-- m --><a class="postlink" href="http://www.raworths.co.uk/test/test.html">http://www.raworths.co.uk/test/test.html</a><!-- m -->
The file views as it should for on-screen - that is with the name, contact and disclaimer links on the right and a couple of images on the left.
However when using print preview and/or printing the file, the images and links have gone but the replacement text isn't there.
Thank you for your help.
PendleHi,
Try changing media="all" to media="screen" and it should work.
Paulthat's worked fine, thank you