219 lines
8.3 KiB
HTML
219 lines
8.3 KiB
HTML
<!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>
|