All geek questions in one place

Custom header and footer in html page

I want to put a header and footer on each page in print mode. I have researched a lot about this.

I found two solutions. But they are not a cross browser (I want it to work in IE, Firefox and Chrome)

First solution: I set the fields above and below in the content table. Then I write the header and footer in this fixed position space. It works great in Firefox. But in IE and Chrome, it does not set fields. Also in Chrome, he does not write headers and footers on every page.

Here is my code:

pagination.php

<!DOCTYPE HTL> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex"> <meta http-equiv="cache-control" content="no-cache"> <title>Brove.NET ISO Yazılımı</title> <link rel="stylesheet" type="text/css" href="css/pagination.css" /> </head> <body> <table class="header" cellpadding="0" cellspacing="0"> <tr> <td>header </td> </tr> </table> <table class="content" cellpadding="0" cellspacing="0"> <tr> <td valign="top"> content </td> </tr> </table> <table class="footer" cellpadding="0" cellspacing="0"> <tr> <td>footer </td> </tr> </table> </body> </html>

pagination.css

 @media screen{ .header{ width:768px; height:100px; border:2px solid #000; } .content{ width:768px; margin-top:10px; margin-bottom:10px; height:1000px; } .footer{ width:768px; height:100px; border:2px solid #000; } } @media print { .header{ position:fixed; top:0; left:0; width:768px; height:100px; border:2px solid #000; } .content{ width:768px; margin-top:120px; margin-bottom:120px; height:1000px; } .footer{ position:fixed; left:0; bottom:0; width:768px; height:100px; border:2px solid #000; } @page{ margin-bottom:150px; } }

And this is the second solution:

In this solution, im uses the attributes table-header-group and table-footer-group . It works with Firefox and IE. But Chrome does not understand again. It does not repeat the header and footer on each page in print mode. A.

Here is another code: Is there a way to get the title / footer of the webpage on each page?

 <style type="text/css"> thead { display: table-header-group; } tfoot { display: table-footer-group; } </style> <body> <table> <thead><tr><td>Your header goes here</td></tr></thead> <tfoot><tr><td>Your footer goes here</td></tr></tfoot> <tbody> <tr><td> Page body in here -- as long as it needs to be </td></tr> </tbody> </table> </body>

Is there any hack to solve these browser problems or do you have any suggestions for me?

+7
source share
2 answers

Try creating your page in a div tag, not in any table tag! div is lighter than table

 <div id='header' style='height:230px'> </div> <div id='body'></div> <div id='footer' style='height:230px'> </div>

Thanks!

0
source

In my opinion, this website, which has an een api and many options, such as a custom header and footer, is great for printing:

http://pdfmyurl.com

In my case, the speed is excellent and does not change anything in the layout.

Solution two (a lot of work): Use absolute positioning for all elements.

0
source

Source: https://habr.com/ru/post/906300/

More articles:


All Articles