print_header_footer.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5. <title>Header and Footer example</title>
  6. <style type="text/css">
  7. @page {
  8. margin: 2cm;
  9. }
  10. body {
  11. font-family: sans-serif;
  12. margin: 0.5cm 0;
  13. text-align: justify;
  14. }
  15. #header,
  16. #footer {
  17. position: fixed;
  18. left: 0;
  19. right: 0;
  20. color: #aaa;
  21. font-size: 0.9em;
  22. }
  23. #header {
  24. top: 0;
  25. border-bottom: 0.1pt solid #aaa;
  26. }
  27. #footer {
  28. bottom: 0;
  29. border-top: 0.1pt solid #aaa;
  30. }
  31. #header table,
  32. #footer table {
  33. width: 100%;
  34. border-collapse: collapse;
  35. border: none;
  36. }
  37. #header td,
  38. #footer td {
  39. padding: 0;
  40. width: 50%;
  41. }
  42. .page-number {
  43. text-align: center;
  44. }
  45. .page-number:before {
  46. content: "Page " counter(page);
  47. }
  48. hr {
  49. page-break-after: always;
  50. border: 0;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div id="header">
  56. <table>
  57. <tr>
  58. <td>Example document</td>
  59. <td style="text-align: right;">Author</td>
  60. </tr>
  61. </table>
  62. </div>
  63. <div id="footer">
  64. <div class="page-number"></div>
  65. </div>
  66. <h2>Section 1</h2>
  67. <p>
  68. <img src="images/dompdf_simple.png" style="float: right; margin: 0.5em;" />
  69. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
  70. risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
  71. ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
  72. massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
  73. nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
  74. amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
  75. in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
  76. pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo
  77. in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue
  78. blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus
  79. et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
  80. pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
  81. hendrerit.</p>
  82. <hr/>
  83. <h2>Section 2</h2>
  84. <p>
  85. <img src="images/goldengate.jpg" style="float: left; padding: 0.5em;" width="180" />
  86. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut
  87. orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius,
  88. ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus
  89. sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer
  90. id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae
  91. elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer
  92. adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et
  93. sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
  94. eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
  95. elementum posuere, metus purus iaculis lectus, et tristique ligula
  96. justo vitae magna. Morbi vel erat non mauris convallis vehicula. Nulla et
  97. sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
  98. eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
  99. elementum posuere, metus purus iaculis lectus, et tristique ligula
  100. justo vitae magna.</p>
  101. <hr/>
  102. <h2>Section 3</h2>
  103. <!-- yeah, we'll have to do better for inline floating elements -->
  104. <p><span style="float: left; font-size: 4em; width: 0.7em; height: 0.9em; line-height: 1;">A</span>liquam convallis sollicitudin purus. Praesent aliquam, enim at
  105. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  106. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  107. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  108. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  109. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  110. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  111. Curabitur eu amet.</p>
  112. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  113. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  114. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  115. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  116. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  117. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  118. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  119. Curabitur eu amet.</p>
  120. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  121. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  122. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  123. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  124. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  125. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  126. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  127. Curabitur eu amet.</p>
  128. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  129. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  130. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  131. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  132. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  133. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  134. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  135. Curabitur eu amet.</p>
  136. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  137. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  138. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  139. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  140. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  141. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  142. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  143. Curabitur eu amet.</p>
  144. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  145. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  146. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  147. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  148. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  149. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  150. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  151. Curabitur eu amet.</p>
  152. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  153. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  154. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  155. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  156. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  157. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  158. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  159. Curabitur eu amet.</p>
  160. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  161. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  162. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  163. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  164. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  165. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  166. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  167. Curabitur eu amet.</p>
  168. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  169. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  170. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  171. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  172. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  173. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  174. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  175. Curabitur eu amet.</p>
  176. <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
  177. fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
  178. lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
  179. libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
  180. suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
  181. tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
  182. felis magna fermentum augue, et ultricies lacus lorem varius purus.
  183. Curabitur eu amet.</p>
  184. </body></html>