3 replies [Last post]
cwb2
Offline
newbie
Last seen: 17 years 36 weeks ago
Joined: 2004-12-07
Posts: 2
Points: 0

I have been trying to create a printable version for the site I am working on. I am so close to getting the look I want using two different styles, one for screen and one for print. It allowed me to hide the images that I don't want to print.

The only problem is that it cuts the text off that is to the right of the page. Is there a way to have all the text align to the left of the page?

The best way to explain it might be to have you go to:

http://www.billgladstone.com/CSS_Print/100_CorporateCenter.htm

and print preview.

Thank you for any help you can give me.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 14 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Print Style Sheet?

Well, its a start [-o<

This may be personal preference, but it seems to be the way a lot of places do it. If you have ids on a number of your tables and table columns, you may be able to make the contents disappear by having:

/*begin print styles*/
@media print {
#id1,
#id2,
...
#id5 {display:hidden;}
...
}
/*end print styles*/

and for column width have {width:0; padding:0;} (you would have to specify the column width in the CSS not in the HTML, BTW).

I would also add alternate width to specify the page dimension setup for portrait printing and set a base fontsize to 12pt (Yes - points are appropriate here). You might also consider setting p.normal {margin:0 1em;} so that the property specifications are not spread out so much vertically - you want things compact for printing.

A good article on print styling from alistapart and another from the always excellent Eric Meyer. Finally there is a fairly long thread at Webmasterworld here.

Hope that helps.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

cwb2
Offline
newbie
Last seen: 17 years 36 weeks ago
Joined: 2004-12-07
Posts: 2
Points: 0

Problem with the code?

When I use the code you suggested Dreamweaver has a fit and quits. I named my tables table1, table2, and table3.

What could be happening?

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 14 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Print Style Sheet?

Well, I don't use Dreamweaver, I hand code mostly. If Dreamweaver chokes on previewing code that is valid CSS, I don't think I am the one with the answers. :-k

For debugging print styles - make sure they are at the end of the stylesheet or in a separate stylesheet and remove any @media print { within the stylesheet or any media="print" from the call to a linked stylesheet. That way you are looking at the styles as they will be for the printer. The only thing you can't really see this way are the paged media specific properties like the page size.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS