Results 1 to 7 of 7

Thread: headers in print css

  1. #1
    Join Date
    Feb 2007
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default headers in print css

    Is there a way to print a header or line on every page using css? I don't mean to override the header that the browser uses, I mean a line that would simply appear at the top of each printed page.

    I tried this, but it didn't work in either FF or IE.

    Code:
    <style type="text/css" media="print">
     @page { 
       @top-left{
           content: "Content on each page"; 
       } 
     } 
    </style>
    Thanks.

  2. #2
    Join Date
    Feb 2007
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    It would seem that css should be able to do this, but I've tried googling and nothing reallyturned up-

    All i want is to have something - a line of text or a logo - appear on each page when the document prints. I can put that at the top or bottom of the entire article, but in an article that's multi-pages, I'd like to have this on EACH page that prints.

    I went to w3.org and on http://www.w3.org/TR/2003/WD-css-print-20030813/#s.8.4 section 8.43 Running Headers and Footers they indicate it can be done and have the code, but it's like what I tried. (see first post - didn't work)

    Anybody????

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by Peter Johnson View Post
    Is there a way to print a header or line on every page using css? I don't mean to override the header that the browser uses, I mean a line that would simply appear at the top of each printed page.

    I tried this, but it didn't work in either FF or IE.

    Code:
    <style type="text/css" media="print">
     @page { 
       @top-left{
           content: "Content on each page"; 
       } 
     } 
    </style>
    Thanks.

    CSS - Cascading Style Sheets. It cannot write anything up there by itself. You would need to write something in html, then write a seperate print style sheet that activates the style you created.

  4. #4
    Join Date
    Feb 2007
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Yes I know that.

    I have an html document. This document has a style sheet for the screen and one for print.

    I am trying to see if there is a way to put either a div on the html document or some type of header that would be seen only on print, AND be seen at the top of each page. I know how to put a div on the html document that will be seen only in print. What I am looking for is a way to have something display on every page.

    I am not trying to replace the headers and footers that printers put on their own. The code that I tried using came from the w3 as a way to put a header on each page. But it did not work when I tried it in my html document.

  5. #5
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I believe the w3 code you refer to is from a draft document that is still under review.

    The only way to get the effect I think you're looking for would be if you had data in tables, and you used thead and/or tfoot. You could put the content in thead or tfoot in a div that would be viewed on print only. But even then, it doesn't work in all browsers. In IE 6, you would simply get the thead content at the top of the first page, and the tfoot content at the end of the last page.

  6. #6
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by boogyman View Post
    CSS - Cascading Style Sheets. It cannot write anything up there by itself.
    That's not entirely accurate. CSS can insert content in a limited fashion, though support is far from complete across browsers.

    Unfortunately, paged media features in existing CSS Recommendations aren't implemented that thoroughly (I think Opera has the best support), let alone proposals for CSS 3. I don't think you'll find a satisfactory solution (though I'd happily be wrong).
    Mike

  7. #7
    Join Date
    Feb 2007
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thank you Veronica. Putting the content in a table and using thead works, at least in IE7 and FF. I've explained the issues to the client and its up to them to decide now.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •