HTML-Sheets-of-Paper
HTML-Sheets-of-Paper copied to clipboard
delight-im
is there a way to add a header and footer on each page?
Nice template, is there a way to add a header and footer on each page?
Thanks!
Good question. Yes, this is possible, and quite easily, even.
First, define your header and footer elements after the opening <body> tag like this:
<div id="pageHeader">My header ...</div>
<div id="pageFooter">My footer ...</div>
Now, the ideal way would be to assign position: running(...) to them in CSS and use them somewhere via content: element(...). But as is often the case, support for these parts of the specification in web browsers, e.g. Chrome and Firefox, is poor to non-existent.
Luckily, there’s a simple workaround. Just use the following CSS instead:
#pageHeader {
position: fixed;
top: 0;
}
#pageFooter {
position: fixed;
bottom: 0;
}
The downside? This will only work in print mode, not screen. So perhaps consider hiding the two elements in @media screen and showing them only in @media print.
Perhaps we’ll add something like this to the examples as well. Let’s keep this issue open until then.
This is a cool template...
How do you stop the header and footer from overlapping with the body? Currently the header/footer is on top of the body...
@aghaynes It looks like there is sufficient space in your case to move the header upward and the footer downward, right? Did you check the margin and padding of your header/footer elements? Apart from that, you could then set a fixed height and use an overflow value.
Thanks @ocram. I've played around with margin and padding but was unsuccessful (maybe I changed the wrong one(s)). I think the issue is rather that I have just one long page div and the fixed header/footer. When it breaks the page, the header/footer are then placed on top of the page div...
e.g.
<div id="pageHeader">My header ...</div>
<div id="pageFooter">My footer ...</div>
<div class="page">
really long content that spans 2 or more pages...
</div>
It seems to work with
<div id="pageHeader">My header ...</div>
<div id="pageFooter">My footer ...</div>
<div class="page">
content for page 1
</div>
<div class="page">
content for page 2
</div>
But that breaks the flow of the document and requires specific input on where to break pages... is there a way to close the div and open a new one automatically for the rest of the content if it's already full? (and also puts the page number (senso #17) perhaps, maybe thats easier in the footer though...)
Sorry if thats a stupid question - i'm pretty new to css and html...