What code and where would I insert it in a page to suppress some of the parts of the information in the main body from printing.
I am trying to avoid the extra step of developing separate print-friendly pages for some sections of the Website I'm working on. Thank you.
Alice
How do you code for print-friendly version of a page?
3 posts
• Page 1 of 1
How do you code for print-friendly version of a page?
by Alice Henneman » Tue May 02, 2006 7:57 am
- Alice Henneman
- Posts: 5
- Joined: Sat Mar 18, 2006 12:16 pm
by saltybeagle » Tue May 02, 2006 1:34 pm
I would add something like this into the editable portion of the <head> of the page (right after <!-- InstanceBeginEditable name="head" -->), or storing it in a external css file and adding a link to it.
Using the correct css selectors for the items you want to hide of course.
Those would hide <div id="noprint"></div> and <div class="noprint"></div> elements.
- Code: Select all
<style type="text/css">
@media print {
#noprint, .noprint {display:none;}
}
</style>
Using the correct css selectors for the items you want to hide of course.
Those would hide <div id="noprint"></div> and <div class="noprint"></div> elements.
Brett Bieber
- saltybeagle
- Posts: 376
- Joined: Fri Jan 16, 2004 3:10 pm
- Location: 321 Admin
How do you code for print-friendly version of a page?
by MarkHiatt » Thu Jun 22, 2006 11:11 am
This brings up an interesting feature of (X)HTML and CSS: You can combine classes.
Using Brett's example, with a class of .noprint appearing only within the @media tags with a display: none value, you can add a class="noprint" to any element you don't want to display on a printed page.
You can't click on page navigation on a piece of paper, so many people elect to turn printing for navigation off. Somewhere on your page, you probably are declaring a division with an ID of "nav" or "menu" or whatever. Simply adding "class=noprint" at that place on your page will turn off printing that area. But what if you aren't using an ID, but are instead using a class? You can combine classes!
This works and even validates! The W3C spec says the class attribute assigns one or more class names to an element. The effect is cumulative. If you had a class, .classOne, that changes your font color to Red, and another class, .classTwo, that makes it oblique,
Try it. It's pretty handy.
Using Brett's example, with a class of .noprint appearing only within the @media tags with a display: none value, you can add a class="noprint" to any element you don't want to display on a printed page.
You can't click on page navigation on a piece of paper, so many people elect to turn printing for navigation off. Somewhere on your page, you probably are declaring a division with an ID of "nav" or "menu" or whatever. Simply adding "class=noprint" at that place on your page will turn off printing that area. But what if you aren't using an ID, but are instead using a class? You can combine classes!
- Code: Select all
<div class="footerstuff noprint">
This works and even validates! The W3C spec says the class attribute assigns one or more class names to an element. The effect is cumulative. If you had a class, .classOne, that changes your font color to Red, and another class, .classTwo, that makes it oblique,
- Code: Select all
<p class="classOne classTwo">This text would be Red and Oblique</p>
Try it. It's pretty handy.
=MH=
- MarkHiatt
- Posts: 36
- Joined: Mon Jul 26, 2004 3:09 pm
- Location: '501' Building - Room 123.1
3 posts
• Page 1 of 1
Who is online
Users browsing this forum: No registered users and 1 guest