Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

printing multiple pages layed out using CSS

Status
Not open for further replies.

wgcs

Programmer
Mar 31, 2002
2,056
EC
I need to produce HTML pages that can be viewed in the browser or printed.

The print must have things laying out correctly, preferably with text placed a absolute positions using things like:
(P STYLE="position:absolute;top:<<nY>>in;left:<<nX>>in")report text(/P)

It works, and page breaks can be added using:

(style)
BR.FF { page-break-after: always }
(/style)
. . .
(BR class="FF")


However, when viewed in the browser, all pages stack on top of each other, instead of being able to scroll down to get to the second, third, etc pages.

Any Ideas?
 

Break your print and screen stylesheets apart... Then use your absolute positioning for your print CSS - which works, and whatever positioning you wnat for your screen CSS.

Something like this should work:

Code:
<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="print.css" type="text/css" media="print">

Hope this helps,
Dan
 
That's an interesting idea: I didn't know that the "media" tag was available. Is it possible to have a similar media-selection when the stylesheet is not in a separate file?

What I'm using this for is as a reporting mechanism for a database application. The user can produce a report using our internal previewer/print mechanism, or produce the report in MS Word, or produce the report in HTML. CSS works great for positioning on one page, based on Inches, but the second page doesn't work so well (since on the screen it seems to overlay the first page, though it looks great on the printer).

Since the reports will have 100's text items, each positioned at a different spot, it didn't seem appropriate to me to create a CSS class for each one, and store that class in a separate file.. I was using the style="...." attribute on each piece of text's surrounding P-tag.
 
wgcs:

As the current standard sits right now, each media type must reference a CSS file individually, as Dan has demonstrated above.

for more information on print style sheets, check out this excellent article at A List Apart by Eric Meyer, who is, as far as I'm concerned, one of the cornerstones of CSS:


HTH

Greg Tammi, IT Design & Consultation
Work: Home:
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top