How can I repeat some footer information on each print page using #page?
I don't want to use a fixed position div as suggested in a "duplicate" question.
I've just got a completely standard HTML template with the following in the body:
<div id="main">
<h1>This is the title</h1>
<p>And the content</p>
</div>
This is my css:
#media print {
.page-break {
page-break-after: always!important;
}
}
#page {
size: 7in 9.25in;
margin: 27mm 16mm 27mm 16mm;
}
#page :left {
#bottom-left {
content: "This is a test";
}
}
At the moment in the latest version of Chrome it's not showing anything in the print preview. Where am I going wrong?
i've been playing around with this. seems #page has very limited use.
here's what i could get. not what you were hoping for. a positioned div might be best if you can.
#media print {
.page-break {
page-break-after: always !important;
}
/* this adds the content to the bottom of the first page only.
div::after {
content: "This is a test";
bottom: 0;
position: absolute;
} */
/* this adds the content right beside the div. kind of useless.
.page-break::after {
content: "This is a test";
} */
/* this adds the content to the bottom of the first page only,
but multiple times; once for every page-break class i guess.
.page-break::after {
content: "This is a test";
position: absolute;
bottom: 0;
} */
}
You can try it like this:
<head>
<style>
p { page-break-after: always; }
.footer{ position: fixed; bottom: 0px; }
.pagenum:before { content: counter(page); }
</style>
</head>
<body>
<div class="footer">Page: <span class="pagenum"></span></div>
<p>lorem ipsum ...</p>
<p>lorem ipsum ...</p>
</body>
My example is for page footer but you can do the same with page header by specifying top where I said bottom and of course 'footer' becomes 'header'. You can put both header and footer
Another option you could try is something I used for a while, you will need to setup a local to view php files (look into wamp for windows and mamp for mac -- linux manually), but if you make a php file just containing your footer or navbar etc you can use the php load function to get it into another page.
//In footer.php
<footer>Footer Stuff</footer>
//In index.php or other pages
<body>
<div id="whereFooterShouldBe"><?php load('footer.php') ?></div>
</body>
In doing this your file references in your footer.php (css links js tags etc) will need to be file-pathed relative to the file which your are using the php load function in, not the footer.php itself.
Even further this method could be used to load any html from one file into another. This is very useful for rapid development, with my clients I use this method for my footer and navbar so I only have 1 file to change that will result in the correct changes being made across all pages.
Related
I have to print the webpage with customized header in every page,
Below is my CSS code for print media
#media screen {
header.onlyprint, footer.onlyprint,.watermark{
display: none; /* Hide from screen */
}
}
#page {
size:A4;
}
#media print {
#page {
size:auto;
margin-top:2mm;
}
html{
margin-top: 20mm;
}
header.onlyprint {
position: fixed; /* Display only on print page (each) */
top: 0; /* Because it's header */
margin-top: 0;
}
}
And HTML code is:
<header class="onlyprint">
<img src="images/logo.png"/>
</header>
But the problem is only in first page the logo is printing properly and from second page the logo is getting overlapped with body content.the CSS of HTML is not working from second page.
It seems this task cannot be properly implemented with CSS only.
I found a workaround for IE and Firefox using tables here: http://www.jessicaschillinger.us/2017/blog/print-repeating-header-browser/
Quick summary of that link's content: IE and Firefox will repeat the <thead> Element on every printed page, whereas the <tbody> will be printed continuously without repetition.
I have a simple HTML page that I want to convert to pdf (print mode). I got the Header to repeat in every page but I noticed that the header covers the content in the second page. Any one know how to avoid that?
Note: I am using Bootstrap, but I commented it out so I could use my own styles.
SCSS:
#media print{
header{
position: fixed;
top: 0;
border: none;
}
main{
margin-top: 2cm;
}
footer{
position: fixed;
bottom: 0;
}
#page {
size: auto;
//margin: 6.35mm;
}
}
Fiddle for HTML: https://jsfiddle.net/u1oy0ehj/
Thanks!
#media print executes the code only for the print mode. So anything you include inside this is not affected in the normal browser mode. So you can get rid of the position: fixed; in the header only for print mode so it doesn't behave that way even in the print mode.
Fixed positioning takes an element out of the document flow, so no fiddling the element will work.
JSFiddle updated
If you want the position: fixed then all you can do is push the <main> content down only for print mode.
main{ margin-top: 5cm; } //probably more than what you had given '2cm'
Even this can't help you much because in the second page since you have made your header fixed(its out of the document flow), the overflowing contents will think the header doesn't exist and continue as usual giving you an overlapped effect.
<div id="list${MACRO}TopDivRow" class="row">
<style>
#media print{
body *:not(#list${MACRO}TopDivRow):not(#list${MACRO}TopDivRow *){
visibility: hidden;
}
#list${MACRO}TopDivRow {
visibility : visible;
position: absolute;
left: 0;
top: 0;
}
}
</style>
<button onclick="window.print();">
print
</button>
---------------------Explanation--------------------------------
#media print is useful to print a page.
#list${MACRO}TopDivRow - this is the division id which you want to print.
in the entire body of page, first iam hidding the content which is not belongs to my perticular division.so i have written **visibility : hidden** there. In the second code snippet, iam printing required division, so i have placed **visibility : visible there**.
window.print() - useful to print the content of window.
you can use completely JavaScript to print the particular division in your page.here we are using simple swapping logic between original content and particular division.if you want entire page, pass entire page division id.
<script type="text/javascript">
function printContent() {
var printContents = document.getElementById("list${MACRO}TopDiv").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
list${MACRO}TopDiv - this is your division which you want to print
I am trying to make a online form, which has header(with the logo of the company) and footer( with three different addresses). And in the body there are so many things. I need to flow the header logo in every page of the form but I need to fix my footer only on the first page not in every page.
For the header logo i am using
#page { #top {content: flow(page_header); }} .
but when i use the same thing for the footer it is not working. Can anybody help me about this?
Note: I am using docraptor for converting the html into pdf.
Developer at DocRaptor here. You can do this using some simple CSS. Here is a full demonstrative example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 { flow: static(page_header); }
h2 { flow: static(first_page_footer); }
#page {
#top { content: flow(page_header); }
}
#page:first {
#bottom { content: flow(first_page_footer); }
}
hr { page-break-after: always; }
</style>
</head>
<body>
<h1>Header Content</h1>
<h2>Footer Content</h2>
<p>Page 1 content.</p>
<hr />
<p>Page 2 content.</p>
</body>
</html>
Hope that helps! Email DR Support if you run into any different questions or want to say hi. :)
I've been trying some documented features of CSS3 to have headers repeat at the top of each page (at least at printing time) but that's not working, neither with Safari nor Firefox.
Would anyone have a clue about why?
Here is a simple non-working test below:
<html>
<head>
<style type="text/css">
#header{
position: running(pageHeader);
}
#page {
size: A4 portrait;
margin: 2in;
#top-left {
content: "THIS IS ANOTHER NON-WORKING ATTEMPT";
}
}
#page {
#top-center {
content: element(pageHeader);
}
}
div.content {
page-break-after: always;
}
</style>
</head>
<body>
<div id='header'>THIS IS A NON-WORKING ATTEMPT TO HAVE THIS HEAD EVERY PAGE</div>
<div class='content'>Content for a Page1, which is properly followed by a page-break</div>
<div>Content for a Page2</div>
</body>
</html>
If you only need it at printing time, why don't you try hiding it with a regular CSS rule and showing it with a #media print CSS rule? You probably can do this and make a different div that sticks to the top of the page (on a browser) and hide this new div on printing.
I need to make a report in HTML that is supposed to be A4 size exactly. It needs headers and footers. Surely this can be done with css yeah?
does anyone have any examples or sample code for this?
I googled and the code snippets I got all talk about media queries and they don't work..
so basically it is for print Purposes, the html generated will be converted to a PDF document.
I am using MVC4 and found a tool that will convert a view to a PDF. A view is just pure HTML. So I thought why not style the HTML to represent the output report, then PDF it.
So I need the ability to have a header, and a footer (bottom of the page) and then content in the middle of both of them
I tried using the following code, but it doesn't seem to work..
<html>
<head>
<style type="text/css" media="all">
#page {
size: A4 portrait; /* can use also 'landscape' for orientation */
margin: 1.0in;
border: thin solid black;
padding: 1em;
#bottom-center {
content: element(footer);
}
#top-center {
content: element(header);
}
}
#page-header {
display: block;
position: running(header);
}
#page-footer {
display: block;
position: running(footer);
}
.page-number:before {
content: counter(page);
}
.page-count:before {
content: counter(pages);
}
</style>
</head>
<body>
<div id="page-header">
<p>Header text</p>
</div>
<div id="page-footer">
<p>Footer text</p>
<p>Page <span class="page-number"/> of <span class="page-count"/></p>
</div>
<div id="page-content">
<p>Page 1.</p>
<p style="page-break-after:always;"/>
<p>Page 2.</p>
</div>
</body>
</html>
CSS can be used to set width/height to a real-world size; for example in your print.css file:
div.A4 {
width: 21 cm;
height: 29.7 cm;
margin: 0;
}
However, HTML/CSS really isn't meant for this purpose; media queries really are the best way to handle this. I'd really recommend you put a little more time trying to get them working; it's worth the time if you plan on using this website more than once.
Why A4 size? For printing purposes?
If for printing purposes you wont even have to worry about it. Use CSS for that purpose.
If your html element is displaying as a block element (the default) and you don't specify any width or height then the html document will resize to the printer settings document when you attempt to print.
If you ever need to adjust any css settings for printing then use css media queries
Ignore this answer if it's not related to printing, but provide more details in your post so we can provide the correct solution.
Hope it makes sense
Leo