CODEWITHSUNDEEP
htmlcssprintingheader
JToland
JToland

Reputation: 3710

Displaying A Different Header on the First Printed Page with HTML and CSS

Is it possible, with any mix of HTML and/or CSS, to display one header on the first printed page and then display a different header on each subsequent printed page? I know about the @media print CSS tag to only display something when the site is printed, but that doesn't get me to having different headers on multiple pages.

Any help is appreciated, thanks!

Upvotes: 3

Views: 7522

Answers (3)

esther44
esther44

Reputation: 63

Twelve years later I can answer your question :)

Here is a solution to display a different header on the first print page than on the following pages :

@media print {

  .header, .footer {
      position: fixed;
  }
  
  .header, .header-cover {
    display:flex;
  }

  .header {
      top: 100%;
  }
  
  .header, .header-space {
      height: 5rem;
  }
  
  .footer, .footer-space {
    height: 4rem;
  }
  
  .footer {
      bottom: 0;
  }
}
<body>
<!--Here the HTML of the first header (displayed on landing page)-->
<header class="header-cover">
    <img class="logo-big"
         src="https://picsum.photos/150/100" />
    <div class="right">
        Header 1
    </div>
</header>

  <!-- Here the HTML of the repeated header (on others pages)-->
<header class="header">
   <img class="logo-big"
         src="https://picsum.photos/200/100" />
    <div class="right">
        Repeated Header 
    </div>
</header>
<table>
    <thead>
    <tr>
        <td>
            <!--place holder for the fixed-position header-->
            <div class="header-space">&nbsp;</div>
        </td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>
            <!--*** CONTENT GOES HERE ***-->
            <h1>Title</h1>
            <p class="content">A very long text....</p>
        </td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>
            <!--place holder for the fixed-position footer-->
            <div class="footer-space">&nbsp;</div>
        </td>
    </tr>
    </tfoot>
</table>
<!-- Repeated Footer -->
<footer class="footer">
    <p>
        Text footer
    </p>
</footer>
<button onclick="window.print()">Test Here</button>
</body>

Upvotes: 3

Jason Gennaro
Jason Gennaro

Reputation: 34863

The only way I can see how to do it is to use different headers and forced page-breaks.

So

PAGE 1 

   HEADER 1 //display only on print

   CONTENT....

   PAGE BREAK DIV //display only on print

PAGE 2 

   HEADER 2 //display only on print

   CONTENT....

   PAGE BREAK DIV //display only on print

etc..

Your headers would get a class of printHeaders

Your page break div would be something like <div class="pageBreak"></div>

In your CSS, you would have something akin to 

  .printHeaders, .pageBreak  {display:none;}

@media print {
  .printHeaders, .pageBreak  {display:block;}
  .pageBreak  {page-break-before:always;}
}

Upvotes: 1

ecchymose
ecchymose

Reputation: 673

from http://css-discuss.incutio.com/wiki/Printing_Headers

If you want full, CSS-controlled print headers and footers, you'll need to wait until browsers implement support for the CSS3 Paged Media Candidate Recommendation. It explicitly provides for the facility but in a quite different way, using margin boxes.

probably because...

... the CSS description of position: fixed, [is] namely "... In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page ..." [Section 9.3.1]

...but the article says it doesn't work as of these days.

BUT, to help you, later the article says:

Setting a top margin on body (for example) will work only for the first page.

Upvotes: 1

Related Questions