Back To Website Design Forum

Printing a DIV

  • the_Maven
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Feb 02, 2004
  • Posts: 196
  • Status: Offline

Post October 7th, 2004, 10:16 am

This is another issue I am facing at the moment. I am developing a site for a class project with a scrollable div on each page. On one of the pages the stuff in the content div ( <div id="content"> ) is extra long. I was wondering if there was a way to print just the div. This is an offshoot of the iframe problem i was facing earlier, but iframes are not allowed in XHTML. hence I'm using the div. If it makes any difference, I am not using the z-index property in the style sheet for the content div.

Thanks for any help with this.

maven
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 7th, 2004, 10:16 am

  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post October 7th, 2004, 11:22 am

Are you using a database to populate the div?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post October 7th, 2004, 6:54 pm

You need to check out the @media rules.

http://www.w3.org/TR/2003/WD-CSS21-2003 ... media-rule
- dM
  • the_Maven
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Feb 02, 2004
  • Posts: 196
  • Status: Offline

Post October 7th, 2004, 11:28 pm

The content in the div is hardcoded into the page. Also, I see where the @media thing can be appropriate, but I dont think it is necessary in this scenario. the div is the default black text on a white background.

Thank you for your help.[/i]
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post October 8th, 2004, 5:57 am

You're not a very thorough reader. :)

Using paged media, your users can hit the "print" button in their browser while viewing the whole web-page, but only print the elements in the page that you want them to.
- dM
  • the_Maven
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Feb 02, 2004
  • Posts: 196
  • Status: Offline

Post October 8th, 2004, 6:16 am

Hey digitalMedia, The other time I just skimmed through it. I read it this time and I think i get what you are saying now. on the page you referred me to there is this example:

Code: [ Select ]
@media print {
  body { font-size: 10pt }
 }
 @media screen {
  body { font-size: 13px }
 }
 @media screen, print {
  body { line-height: 1.2 }
 }
  1. @media print {
  2.   body { font-size: 10pt }
  3.  }
  4.  @media screen {
  5.   body { font-size: 13px }
  6.  }
  7.  @media screen, print {
  8.   body { line-height: 1.2 }
  9.  }


So if I just wanted to print out the one div i would do this...?

Code: [ Select ]
@media print {
  #content { font-size: 10pt }
 }
 @media screen {
  #content { font-size: 13px }
 }
 @media screen, print {
  #content { line-height: 1.2 }
 }
  1. @media print {
  2.   #content { font-size: 10pt }
  3.  }
  4.  @media screen {
  5.   #content { font-size: 13px }
  6.  }
  7.  @media screen, print {
  8.   #content { line-height: 1.2 }
  9.  }


Question though: even if the styling for the div (on the screen) is already set in another rule on the style sheet, do i have to move the formatting to the @media rule? :)
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post October 8th, 2004, 8:35 am

I think this is a bit tricky the first time you go through it. What I've done is set up and example for you.

Here's the code I've used:
Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Only Print the "center" DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
@media print
{
body{font-family:georgia,times,sans-serif;}
#left{display:none;}
#center{display:block;}
#right{display:none;}
}

@media screen
{
body{font-family:arial,verdana,sans-serif;}
#left{display:block;margin:20px;}
#center{display:block;margin:20px;}
#right{display:block;margin:20px;}
}
</style></head>

<body>

<div id="left">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio. </div>

<div id="center">
    Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. </div>

<div id="right">
    Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</div></body></html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Only Print the "center" DIV</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <style>
  8. @media print
  9. {
  10. body{font-family:georgia,times,sans-serif;}
  11. #left{display:none;}
  12. #center{display:block;}
  13. #right{display:none;}
  14. }
  16. @media screen
  17. {
  18. body{font-family:arial,verdana,sans-serif;}
  19. #left{display:block;margin:20px;}
  20. #center{display:block;margin:20px;}
  21. #right{display:block;margin:20px;}
  22. }
  23. </style></head>
  25. <body>
  27. <div id="left">
  28.     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio. </div>
  30. <div id="center">
  31.     Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. </div>
  33. <div id="right">
  34.     Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</div></body></html>


...and here you can see it in action:
http://www.chriscarney.com/cleanMe/CSSMedia/HTML401.htm

You should only have to use the "Print Preview" function in your browser to see it working.

To be honest, my head is not really in the game this morning so, please, bear with me.

With in each section, or combined section, the trick is having counterparts for each part of the definition. So, I've defined my #left selector to display:none; int the print section. In my screen section, I need to have a the counterpart display:block; .

For the body selector, I've just reused the same definition, although I could have used a combined section (i.e. @media screen, print) for definitions that apply to both.

Using this technique, you should be able to apply any number of definitions to your CSS, for both screen and print media.

Does this help? If it doesn't, let's keep this conversation going. This is a capability of CSS that I get very excited about, having worked in corporate atmospheres where EVERYTHING gets printed.
- dM
  • the_Maven
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Feb 02, 2004
  • Posts: 196
  • Status: Offline

Post October 8th, 2004, 8:42 am

Ok this is what i am understanding:

to determine what part of the page should be printed, you have to set what parts of the page should not be printed?

the div i am concerned with is in a td cell. would it help if i showed how the table was set up?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post October 8th, 2004, 8:45 am

Yes! :D

and sure, that'd be great to see what you're doing with the HTML.

I may not be able to come back to this before the end of the workday, though. :(

*shakes fists @ sky*
Why can't I make my living posting on Ozzu! :lol:
- dM
  • the_Maven
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Feb 02, 2004
  • Posts: 196
  • Status: Offline

Post October 8th, 2004, 9:18 am

you'll have to scroll down a bit to get to the div im talking about. it is under the bold text


Code: [ Select ]
<body><div><br /><table><tr><td class="top" colspan="2">
<a href="http://www.ces.ncsu.edu/" onmouseover="window.status='North Carolina Community Extension Home';return true"
onmouseout="window.status='';"><img alt="North Carolina Community Extension Home" src="images/ces1.gif" width="518" height="115"
class="logo" /></a><a href="http://www.co.guilford.nc.us/" onmouseover="window.status='Guilford County Home Page';return true"
onmouseout="window.status='';"><img alt="Guilford County Home Page" class="county" src="images/guilford.gif" /></a></td></tr>
<tr><td class="headbar" colspan="2"><span class="text">
<a onmouseover="window.status='Guilford County Center Home';return true" onmouseout="window.status='';"
href="index.html">Guilford</a> &brvbar;
<a onmouseover="window.status='Guilford County Center Home';return true" onmouseout="window.status='';" href="index.html">
Plan of Work 2004</a></span><span class="date"><script type="text/javascript" src="scripts/date.js"></script>&nbsp;</span></td></tr>
<tr><td class="menu" rowspan="2">
<div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Guilford County Center Home';return true"
onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
<a href="index.html" style="text-decoration:none">guilford home</a></div>
<div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='See what events are coming soon!';return true"
onmouseout="this.style.backgroundColor='#0099ff'; window.status='';"><a style="text-decoration:none" href=
"http://www.ces.ncsu.edu/Events/search.php?range_choice=thismonth&audience=e&reach=c-41&program_area=All&lrp=All&s=&Submit=Search">
event calendar</a></div>
<div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='See our current weather forecast';return true"
onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
<a href="http://www.w3.weather.com/weather/local/USNC0280?from=search_city" style="text-decoration:none">local weather</a></div>
<div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Meet our faculty members';return true"
onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
<a href="staff/staff.html" style="text-decoration:none">faculty &amp; staff</a></div>
<div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Read our newsletters';return true"
onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
<a href="newsletters/news.html" style="text-decoration:none">ces newsletters</a></div>
<div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Guilford County Plan of Work 2004';return true"
onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
<a href="pow.html" style="text-decoration:none">plan of work</a></div>
<div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Family Activities, 4-H, and more';return true"
onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
<a href="family/family.html" style="text-decoration:none">family &amp; youth</a></div>
<div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Gardening Home';return true"
onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
<a href="garden/garden.html" style="text-decoration:none">gardening home</a></div>
<div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Horticulture Home';return true"
onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
<a href="horticulture/horticulture.html" style="text-decoration:none">horticulture home</a></div>
<div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Links of Interest';return true"
onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
<a href="links.html" style="text-decoration:none">important links</a></div>
</td><td class="main">

<b>HERE IS THE DIV</b>

<div id="content"><hr /><span class="subhead">Guilford County Plan of Work &ndash; January 1, 2004</span><hr />
<span class="subhead">executive summary</span><br />
As part of the eleven-county Piedmont Triad region, Guilford County is centered along the piedmont industrial crescent stretching from
Raleigh to Charlotte. With a population of 421,000, Guilford County is ranked third in the state. Major cities include Greensboro
(224,000) and High Point (86,000). The public school system serves 60,000 students, along with eight colleges, universities and a
community college system that serve a total of 29,000 students. The county's traditional employment base of textiles, apparel and
furniture has diversified greatly in the last fifty years. Capital investment of over $l.2 billion by new and expanding firms created
27,000 new jobs in the past ten years. An excellent transportation infrastructure, including two interstate highways, Piedmont Triad
International Airport and available rail and truck service, has helped to solidify the county's position as a major distribution and
transportation center in the Southeast.<br />
Agriculture continues to be an integral part of Guilford County, creating a blend of urban and rural. The 2002 Agricultural income for the
county was $84,472,594. Top commodities include field crops, nursery and greenhouse operations, livestock, and horses. The nursery and
greenhouse industry is a rapidly growing industry which alone represents almost 50 million dollars. Farmers continue to look at a
alternative choices in order to diversify along with the traditional means of conducting business.
Each member of the Guilford County staff conducted an environmental scan which provided an overall summary of needs that should be
addressed. Means of achieving this information included: surveys posted on our website, 1809 surveys mailed/faxed/emailed or
hand-delivered to the public along with sixteen personal interviews.
</div></td></tr></table></div></body>
  1. <body><div><br /><table><tr><td class="top" colspan="2">
  2. <a href="http://www.ces.ncsu.edu/" onmouseover="window.status='North Carolina Community Extension Home';return true"
  3. onmouseout="window.status='';"><img alt="North Carolina Community Extension Home" src="images/ces1.gif" width="518" height="115"
  4. class="logo" /></a><a href="http://www.co.guilford.nc.us/" onmouseover="window.status='Guilford County Home Page';return true"
  5. onmouseout="window.status='';"><img alt="Guilford County Home Page" class="county" src="images/guilford.gif" /></a></td></tr>
  6. <tr><td class="headbar" colspan="2"><span class="text">
  7. <a onmouseover="window.status='Guilford County Center Home';return true" onmouseout="window.status='';"
  8. href="index.html">Guilford</a> &brvbar;
  9. <a onmouseover="window.status='Guilford County Center Home';return true" onmouseout="window.status='';" href="index.html">
  10. Plan of Work 2004</a></span><span class="date"><script type="text/javascript" src="scripts/date.js"></script>&nbsp;</span></td></tr>
  11. <tr><td class="menu" rowspan="2">
  12. <div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Guilford County Center Home';return true"
  13. onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
  14. <a href="index.html" style="text-decoration:none">guilford home</a></div>
  15. <div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='See what events are coming soon!';return true"
  16. onmouseout="this.style.backgroundColor='#0099ff'; window.status='';"><a style="text-decoration:none" href=
  17. "http://www.ces.ncsu.edu/Events/search.php?range_choice=thismonth&audience=e&reach=c-41&program_area=All&lrp=All&s=&Submit=Search">
  18. event calendar</a></div>
  19. <div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='See our current weather forecast';return true"
  20. onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
  21. <a href="http://www.w3.weather.com/weather/local/USNC0280?from=search_city" style="text-decoration:none">local weather</a></div>
  22. <div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Meet our faculty members';return true"
  23. onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
  24. <a href="staff/staff.html" style="text-decoration:none">faculty &amp; staff</a></div>
  25. <div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Read our newsletters';return true"
  26. onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
  27. <a href="newsletters/news.html" style="text-decoration:none">ces newsletters</a></div>
  28. <div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Guilford County Plan of Work 2004';return true"
  29. onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
  30. <a href="pow.html" style="text-decoration:none">plan of work</a></div>
  31. <div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Family Activities, 4-H, and more';return true"
  32. onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
  33. <a href="family/family.html" style="text-decoration:none">family &amp; youth</a></div>
  34. <div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Gardening Home';return true"
  35. onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
  36. <a href="garden/garden.html" style="text-decoration:none">gardening home</a></div>
  37. <div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Horticulture Home';return true"
  38. onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
  39. <a href="horticulture/horticulture.html" style="text-decoration:none">horticulture home</a></div>
  40. <div class="button" onmouseover="this.style.backgroundColor='#ffffff'; window.status='Links of Interest';return true"
  41. onmouseout="this.style.backgroundColor='#0099ff'; window.status='';">
  42. <a href="links.html" style="text-decoration:none">important links</a></div>
  43. </td><td class="main">
  45. <b>HERE IS THE DIV</b>
  47. <div id="content"><hr /><span class="subhead">Guilford County Plan of Work &ndash; January 1, 2004</span><hr />
  48. <span class="subhead">executive summary</span><br />
  49. As part of the eleven-county Piedmont Triad region, Guilford County is centered along the piedmont industrial crescent stretching from
  50. Raleigh to Charlotte. With a population of 421,000, Guilford County is ranked third in the state. Major cities include Greensboro
  51. (224,000) and High Point (86,000). The public school system serves 60,000 students, along with eight colleges, universities and a
  52. community college system that serve a total of 29,000 students. The county's traditional employment base of textiles, apparel and
  53. furniture has diversified greatly in the last fifty years. Capital investment of over $l.2 billion by new and expanding firms created
  54. 27,000 new jobs in the past ten years. An excellent transportation infrastructure, including two interstate highways, Piedmont Triad
  55. International Airport and available rail and truck service, has helped to solidify the county's position as a major distribution and
  56. transportation center in the Southeast.<br />
  57. Agriculture continues to be an integral part of Guilford County, creating a blend of urban and rural. The 2002 Agricultural income for the
  58. county was $84,472,594. Top commodities include field crops, nursery and greenhouse operations, livestock, and horses. The nursery and
  59. greenhouse industry is a rapidly growing industry which alone represents almost 50 million dollars. Farmers continue to look at a
  60. alternative choices in order to diversify along with the traditional means of conducting business.
  61. Each member of the Guilford County staff conducted an environmental scan which provided an overall summary of needs that should be
  62. addressed. Means of achieving this information included: surveys posted on our website, 1809 surveys mailed/faxed/emailed or
  63. hand-delivered to the public along with sixteen personal interviews.
  64. </div></td></tr></table></div></body>
  • hashim
  • Born
  • Born
  • No Avatar
  • Joined: Nov 06, 2006
  • Posts: 1
  • Loc: India
  • Status: Offline

Post November 6th, 2006, 11:14 pm

Hi. I am facing the same issue as 'the_Maven' and my sample code is similar to what is posted above.

Let me explain the issue I am facing:
I have some contents inside DIV and I have a print button at the bottom of the page.when I click on the 'print' button,it should print only the contents of the DIV and not any other part of the page.

I have visited the link mantioned:
http://www.w3.org/TR/2003/WD-CSS21-2003 ... media-rule
but I am not very sure how to implement it, as I am not comfortable using styles.

I really apppreciate any guidance on this.

Thanks in advance
Hashim
  • metalfury
  • Born
  • Born
  • No Avatar
  • Joined: Jul 01, 2010
  • Posts: 1
  • Status: Offline

Post July 1st, 2010, 3:05 am

Thanks for this!

You've helped me solve a problem I've been playing with all morning. I basically needed a print button on a certificate, that I didn't want to appear on the final print.

The @media solution worked perfectly

:-)

Page 1 of 1

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 92 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.