print page section with CSS

[Fembot]

I want to use css to print only a certain section of a site I'm working on...can some generous person tell me how to do this? :D

Thanks

[toicontien]

Easy. First, import a print stylesheet to your HTML document by using the code below as an example:
<link rel="stylesheet" type="text/css" media="print" href="/URL/to/your_stylesheet.css">
And in that style sheet, use display: none; to hide the elements on your page you don't want printed. You'll need class names or IDs on the page elements you want hidden in print.

#footer,
#nav {
display: none;
}

The code above would hide two page elements, one with an ID of "footer" and the other with an ID of "nav."

[Norsk]

Here's an example that explains how it works:

The CSS

BODY {
padding: 0px;
background-color: White; /* set the background color to white. */
font-size: 12pt; /* Convert text to points (pt) which is a printer friendly format. */
}
BODY, FORM {
margin: 0px;
}
/* Now we want to hide the layout elements we don't want to print. */
DIV#Header, DIV#NavBar, #LeftColumn, #Footer {
display: none;
}
/*
The ID="Content" is nested within the ID="RightColumn" and so we cannot set the ID="RightColumn" display to none. Additionally we need to overide the ID="RightColumn" styles set in the Style.css.
*/
#RightColumn {
margin: 0px;
padding: 0px;
border: none;
}

DIV#Content {
margin: 0px;
padding: 0px;
width: auto;
float: none !important;
border: none;
color: Black; /* set the text color to black */
background-color: White; /* set the background color to white */
}
A:link, A:visited { /* no need to set active or hover */
background-color: White; /* set the background color to white */
color: Black; /* set the link text color to black */
text-decoration: underline;
font-weight: bold;
}
H1, H2, H3, H4, H5, H6, CAPTION {
background-color: White; /* set the background color to white */
color: Black; /* set the header text color to black */
padding-bottom: 1px; /* override the default padding so it's visually more associated to the text below it */
border-bottom: 1px solid Black;
}

The HTML

<div id="Header"></div>
<div id="NavBar"></div>
<div id="LeftColumn"></div>
<div id="RightColumn">
<div id="Content"></div>
</div>
<div id="Footer">Footer</div>

You will need to adjust the div's to correspond to your document but look at the print CSS comments to understand why you want to set the font size to points, bg to white, width to 100% etc... It works awesome. And yes, like the response above, you will need to have an 'alternative' CSS for the printer function.

<link href="Style.css" rel="stylesheet" type="text/css" />
<link href="PrintStyle.css" rel="stylesheet" type="text/css" media="print" />

After you get everything set up you just need to print the doc.

[pcthug]

My advice, http://www.alistapart.com/articles/goingtoprint/

[Fembot]

thanks...Perhaps I haven't done something properly...when I print, nothing shows up... the other thing, is it a problem if I already have a stylesheet (embedded) and I'm now trying to link another to the same document?

[Norsk]

Fembot...

W/O seeing your code I can't tell but I would recommend that you move your CSS into an external document and link to it. It also sounds like you have set the display: none on something that is then hiding everything. Keep in mind that if you set the display to a DIV, all elements withing that DIV including other DIV's will be hidden as well.

There's two ways to test this.

1) Use the print preview from your browser.
2) Link to the "printer" CSS only and then browser view it.

Cheers...

[Fembot]

another thing...i don't know--maybe it's not possible because the area I want to print is inside of about two tables--and those have content that i do not want to print--it's not possible put div tags in the middle of all that (is it?)
argh...if anyone is still feeling helpful and wants to see some code, I can post it but i warn you, it is LONG

[Norsk]

Fembot...

Yes, that is the issue. So in this example this is how you could do it:

HTML

<table class="Table">
<tr>
<td class="NoPrint">Don't print me!</td>
<td class="Print">Print me!</td>
</tr>
</table>

CSS

TD.NoPrint {
display: none;
}

TD.Print, TABLE.Table {
margin: 0px;
padding: 0px;
border: none;
width: auto;
}

The idea is that you let the printer auto format the page. When you try to force the poge size and the page styles you usually end up with a messy printer page.

[Fembot]

Fembot...

Yes, that is the issue. So in this example this is how you could do it:

HTML

<table class="Table">
<tr>
<td class="NoPrint">Don't print me!</td>
<td class="Print">Print me!</td>
</tr>
</table>

CSS

TD.NoPrint {
display: none;
}

TD.Print, TABLE.Table {
margin: 0px;
padding: 0px;
border: none;
width: auto;
}

The idea is that you let the printer auto format the page. When you try to force the poge size and the page styles you usually end up with a messy printer page.

yes, I believe you are a genius....I'm going to try it out now...thanks for taking the time to help me out!!! I'll post to let you know how it works

[Fembot]

<table class="Table">
<tr>
<td class="NoPrint">Don't print me!</td>
<td class="Print">Print me!</td>
</tr>
</table>


GREAT! It worked! now...one last thing...is there a way to further specify that I only want the nested table sitting inside that larger table cell to print? The top half of the table cell contains some content that I want to hide as well...
hope this is possible...

Either way, thank you SO much

[Norsk]

Yes, I should have mentioned this earlier. This is what I do: I create a class called: .NoPrint and then everything I don't want to print I assign this class to. You can do it like:

HTML

<p class="NoPrint">Don't Print this!</p>
<div class="NoPrint">Don't Print this!</div>
<span class="NoPrint">Don't Print this!</span>
<td class="NoPrint">Don't Print this!</td>

etc..

CSS

.NoPrint {
display: none;
}


This works great to hide the "Print" button on the page for example.

Keep in mind you can combine classes like: <div class="BlueText BoldText NoPrint">Blue bolded text that will not print!</div>

Tim

[Fembot]

Ok, I think I get it now...thank you--I've been at work beating my head against the screen over this for quite some time now! I really appreciate all the help...

[Fembot]

is there a way to add an image/logo to the print version that doesn't show up in the regular page?

[Norsk]

Yes, do the exact reverse logic. Create a "NoPrint" and a "Print" CSS style.

Printer CSS

.NoPrint {
display: none;
}

.Print {
display: inherit;
}

Non printer CSS

.Print {
display: none;
}

[Norsk]

Humm...

Check that... the display inherit may NOT overide the display: none. Let me know but I think you get the drift.

Tim

[Fembot]

can I assign a class to an image? how do i do that?

[Norsk]

<img src="" class="ImageBorder" />

.ImageBorder {
border-top: 1px solid #ccc;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
border-left: 1px solid #ccc;
}

[Fembot]

Tim/Norsk-

ok....*sigh* I got around it...thank for all the help...i'm creating a website (volunteered to) for work and this thing is getting so big I couldn't imagine having to create a second "printer-friendly page" for EVERY page I make. I have some experience but the this job is really required that I learn a couple new tricks... Hope I haven't drained you for the day....

by the way, so you're norwegian eh? Me too (and nigerian)

Thanks again
-Lola

[Norsk]

Jepp, jeg er norsk!

No problem, glad you got it working. Printer friendly pages are a pain and not needed thanks to CSS.

Tim