HTML Print Header & Footer

Question

Is it possible to print HTML pages with custom headers & footers on each printed page?

I'd like to add the word "UNCLASSIFIED" in red, Arial, size 16pt to the top and bottom of every printed page, regardless of the content.

To clarrify, if the document was printed onto 5 pages, each page should have the custom header & footer.

Does anybody know if this is possible using HTML/CSS?

Thanks in advance!

Answer 1

This is an example how to add content visible only in print

<style type="text/css">
#header 
{
     visibility: hidden;
}
#footer
{
     visibility: hidden;
}
@media print 
{
    #header, 
    #footer         
    {
       visibility: visible;
    }
}
</style>
<div id="header">Header</div>
<div id="footer">Footer</div>

If you are generating the html you can come up with some custom solution for your problem

Answer 2

Is this something you want to print-only? You could add it to every page on your site and use CSS to define the tag as a print-only media.

As an example, this could be an example header:

<span class="printspan">UNCLASSIFIED</span>

And in your CSS, do something like this:

<style type="text/css" media="screen">
    .printspan
    {
        display: none;
    }
</style>
<style type="text/css" media="print">
    .printspan
    {
        display: inline;
        font-family: Arial, sans-serif;
        font-size: 16 pt;
        color: red;
    }
</style>

Finally, to include the header/footer on every page you might use server-side includes or if you have any pages being generated with PHP or ASP you could simply code it in to a common file.

Answer 3

This article on about.com talks about how to do the pagination part - basically, it looks like it needs to be scripted.

The other answers regarding media types for CSS are dead-on for what to display onscreen vs off.