123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218 |
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
- <title>Header and Footer example</title>
- <style type="text/css">
- @page {
- margin: 2cm;
- }
- body {
- font-family: sans-serif;
- margin: 0.5cm 0;
- text-align: justify;
- }
- #header,
- #footer {
- position: fixed;
- left: 0;
- right: 0;
- color: #aaa;
- font-size: 0.9em;
- }
- #header {
- top: 0;
- border-bottom: 0.1pt solid #aaa;
- }
- #footer {
- bottom: 0;
- border-top: 0.1pt solid #aaa;
- }
- #header table,
- #footer table {
- width: 100%;
- border-collapse: collapse;
- border: none;
- }
- #header td,
- #footer td {
- padding: 0;
- width: 50%;
- }
- .page-number {
- text-align: center;
- }
- .page-number:before {
- content: "Page " counter(page);
- }
- hr {
- page-break-after: always;
- border: 0;
- }
- </style>
-
- </head>
- <body>
- <div id="header">
- <table>
- <tr>
- <td>Example document</td>
- <td style="text-align: right;">Author</td>
- </tr>
- </table>
- </div>
- <div id="footer">
- <div class="page-number"></div>
- </div>
- <h2>Section 1</h2>
- <p>
- <img src="images/dompdf_simple.png" style="float: right; margin: 0.5em;" />
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
- risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
- ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
- massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
- nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
- amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
- in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
- pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo
- in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue
- blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus
- et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
- pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
- hendrerit.</p>
- <hr/>
- <h2>Section 2</h2>
- <p>
- <img src="images/goldengate.jpg" style="float: left; padding: 0.5em;" width="180" />
- Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut
- orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius,
- ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus
- sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer
- id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae
- elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer
- adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et
- sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
- eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
- elementum posuere, metus purus iaculis lectus, et tristique ligula
- justo vitae magna. Morbi vel erat non mauris convallis vehicula. Nulla et
- sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
- eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
- elementum posuere, metus purus iaculis lectus, et tristique ligula
- justo vitae magna.</p>
- <hr/>
- <h2>Section 3</h2>
- <!-- yeah, we'll have to do better for inline floating elements -->
- <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
- fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
- lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
- libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
- suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
- tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
- felis magna fermentum augue, et ultricies lacus lorem varius purus.
- Curabitur eu amet.</p>
- <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
- fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
- lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
- libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
- suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
- tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
- felis magna fermentum augue, et ultricies lacus lorem varius purus.
- Curabitur eu amet.</p>
- <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
- fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
- lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
- libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
- suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
- tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
- felis magna fermentum augue, et ultricies lacus lorem varius purus.
- Curabitur eu amet.</p>
- <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
- fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
- lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
- libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
- suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
- tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
- felis magna fermentum augue, et ultricies lacus lorem varius purus.
- Curabitur eu amet.</p>
- <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
- fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
- lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
- libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
- suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
- tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
- felis magna fermentum augue, et ultricies lacus lorem varius purus.
- Curabitur eu amet.</p>
- <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
- fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
- lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
- libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
- suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
- tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
- felis magna fermentum augue, et ultricies lacus lorem varius purus.
- Curabitur eu amet.</p>
- <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
- fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
- lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
- libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
- suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
- tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
- felis magna fermentum augue, et ultricies lacus lorem varius purus.
- Curabitur eu amet.</p>
- <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
- fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
- lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
- libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
- suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
- tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
- felis magna fermentum augue, et ultricies lacus lorem varius purus.
- Curabitur eu amet.</p>
- <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
- fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
- lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
- libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
- suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
- tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
- felis magna fermentum augue, et ultricies lacus lorem varius purus.
- Curabitur eu amet.</p>
- <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
- fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
- lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
- libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
- suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
- tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
- felis magna fermentum augue, et ultricies lacus lorem varius purus.
- Curabitur eu amet.</p>
- </body></html>
|