Forum How do I...?

Header & footer positions

CedK
Hi,

I want to create a header on all pages I print. The header have a fixed height. And it seems to be positionned with a -50% top-margin (or bottom-margin for the footer).
The version I'm using is "Prince 10 rev 4".
Am I doing something wrong ?

Besides, my footer does not repeat on every pages...

Best regards

--
Here is my simple test :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="la">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>simple prince pdf</title>
		<style type="text/css">

			header{border: 1mm solid red;}
			#page {border: 1mm solid green;}
			footer{border: 1mm solid blue;}
			header, footer {
				height: 4cm;
				display: block;
			}

			@page {
				margin: 0;
				size: A4 portrait;
			}
			@page {
				@top     { content: flow(header) }
				@bottom  { content: flow(footer) }
			}
			@media print {
				#page {
					margin: 4cm 1cm;
				}
				header {
					top: 0;
				}
				.newPage {
					page-break-after: always;
				}
			}
			header { flow: static(header) }
			footer { flow: static(footer) }
		</style>

	</head>
	<body>

		<header>
			<h1>Mon entête</h1>
		</header>

		<div id="page">
			<h3>Mobn permier chapitre</h3>
			<p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<div class="newPage"></div>
			<h3>Mobn deuxième chapitre</h3>
			<p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<div class="newPage"></div>
			<h3>Mobn troisième chapitre</h3>
			<p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>

		<footer>
			Mon pied de page
		</footer>

	</body>
</html>

Edited by CedK

mikeday
Page margin boxes are placed in the page margins, so you will get weird results if the page margins are set to zero.
CedK
OK Fantastic. I get it ;-)
I've edited mys first post : pb with my footer (does not repeat)
Thanks
mikeday
The footer needs to be at the start of the document, or you can move it there with "flow: static(footer, start)".
CedK
Thank you very much for you quick answers !!
I hope it wasn't a repeated question... or to obvious :-/...
No news about box-shadow ?

Great job,
Cédrik (French, sorry for my bad english)
mikeday
We are working on more documentation which should help in the future. :)

No box-shadow yet, but we are working on rasterisation and filters as well, so maybe later in the year.