Forum How do I...?

page templates, etc

kegster
i have a cover sheet that i have exactly one page width/height.

im dynamically inserting content into my pdf for the next X pages (however many it takes), but i have a page template laid out where there's a fixed width/height div that is only supposed to have the content. this has a background styling as well, etc, and i want it to create as many page templates of this type as possible until the content coming in is done. then produce the rest of the pdf, etc.

here's something i have. i have even tried removing the page_inner clause and seeing if it would add the div to header and footer of all pages, but it doesnt.

@page page_inner {
	margin:0;
	@top { content: flow(page_inner_header) }
	@bottom { content: flow(page_inner_footer) }
}

.page_inner { page: page_inner }

.page_inner p {
	color:#000;
}

.page_inner_header { flow: static(page_inner_header) }
.page_inner_footer { flow: static(page_inner_footer) }


here's an example of my html:
<!DOCTYPE html>
<html>
<head>
<title>MarketBandit Report</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
	<div class="page page_cover">
		<div class="cover_header"></div>
		<div class="cover_bridge bg_slant_white">
			<div class="cover_logo_wrap">
				<a href="http://www.marketbandit.com/" target="_blank" class="cover_logo"><img src="images/cover_logo.png"></a>
			</div>
		</div>
		<div class="cover_bridge_stripe"></div>
		<div class="cover_main_wrap">
			<div class="cover_main_bg"></div>
			<div class="cover_main_mb"></div>
			<div class="cover_main">
				<h1><span class="grey">SEO</span><span class="orange">audit</span></h1>
				<p class="cover_prepared">Prepared for:</p>
				<p class="cover_business">Sample Company, LLC</p>
				<p class="cover_nap">
					123 Happy Street<br>
					Town, WI 45975<br>
					866-555-1234<br>
					tech@samplecompany.com
				</p>
			</div>
		</div>
		<div class="cover_moz"></div>
		<div class="cover_footer"></div>
	</div>
	<div class="page_fluid page_inner">
		<div clas="page_inner_header">
			<div class="page_header">
				<div class="page_logo_wrap">
					<a href="http://www.marketbandit.com/" target="_blank"><img src="images/page_logo.png"></a>
				</div>
			</div>
			<div class="page_top_stripe"></div>
		</div>
		<p>Duis lobortis dui eu nibh molestie pretium. Ut et ligula massa. Morbi nibh neque, semper id consequat vel, rutrum sed justo. Duis dapibus pellentesque urna ac tempor. Cras mattis laoreet nibh, at bibendum lacus mattis a. Maecenas ac interdum arcu, rutrum porttitor velit. Nullam vehicula enim justo, at aliquam eros ullamcorper a. Quisque sit amet dolor condimentum, eleifend ligula vulputate, convallis velit. Nulla non nunc turpis. Curabitur sit amet sagittis dui. Cras dapibus elit quam. Fusce tristique iaculis eros sed auctor. Morbi tincidunt elit nunc, sed tempor urna aliquet egestas. Nam euismod nisl lacus, et condimentum lorem pellentesque sit amet. Phasellus nisi urna, consequat vitae dolor ac, vehicula suscipit turpis. Vestibulum et risus augue.</p>
		<div class="page_inner_footer">
			<div class="page_bot_stripe"></div>
			<div class="page_footer"></div>
		</div>
	</div>
</div>
</body>
</html>


Where you see the loren ipsum, i had that repeating like 100 times to see what it did. the header didnt fixate anywhere except where it would have shown anyway without setting it as header. and the footer showed at only the last part of the doc.
mikeday
This is the culprit:
<div clas="page_inner_header">

Rename clas to class and you're done. :)

However, you will also need to add some margin-top to the page in order to leave space for the header.
kegster
wow, thanks. my editor usually flags typos like that, but did not this time for some reason. props and thanks for discovering that...

at any rate, i will take your additional tips, play with it and come back if i have more questions.

i am correct in assuming that i can wrap an entire section of html within a div, give it a class and then make that entire div the header? nice.
kegster
would there be a reason my @bottom is not working?
kegster
once i fixed the "class" typo, the header now works on the proper pages, but the footer does not. i added proper margins and everything as well (space is blank)
kegster
Basically, i have a header coded out, a footer coded out, and an image i want to use for the background that fits between the header/footer. i want to have an X # of pages to have this page template thats needed until the content in this area runs out. having a hard time getting the footer to show with the header (header shows only), but also can't figure out how to style the middle piece,

i made a background image with the BG image for the content placed in the right spot, but i feel like this is the wrong way.

also, my header has a white stripe at the top of it, so its pushed down further. if i reduce the top margin by 1 pixel or more, the header jacks up real bad.
mikeday
The footer needs to occur immediately after the header in the content, as it will only apply to pages from that point onwards. So it can't be at the very end of the document. However, you can use "flow: static(header, start)" where the "start" indicates that it should take effect as if it was at the start of the document.