I am trying to make a footer for a HTML file where the footer needs to display on every printed page. I found a topic with a solution that locks a specific text to every page I print.
HTML:
<div class="divFooter">This is a footer</div>
CSS:
#media screen {
div.divFooter {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
bottom: 0;
}
}
The problem with this code is that the rest of my code just overwrites this whenever it reaches the footer. Anyone know a nice and quick solution for this? If not, maybe a different way to lock a footer to every page I print of that HTML file? I would also like to note that I cant link a seperate CSS file to the HTML. So every code I make, needs to be in the same file.
Maybe the solution is not just to use HTML and CSS, but to use PHP, making a footer include on each page, so you have a fixed footer for each.
<html>
...
<? php
include_once ("footer.html");
?>
...
Related
I am planning price list available for clients online and I was thinking about simple very long page or div container with some anchor links aside to help jump to different products.
However in case someone wants to print off just price list with certain products I don't want all the pages to print off but only current one.
Is there any print breaking character or tag?
Just in case someone has better idea all I want to achieve is having price list in html to change it in one place but still be able to convert separate product price lists into PDF files for emailing purposes of particular product.
Use this CSS:
#media print
{
.page-break { display:block; page-break-before:always; }
}
and then cite this in your HTML where you want the page to break:
<div class="page-break"></div>
And there you go :)
As per w3schools, you can also do the following:
#media print {
.page {page-break-after: always;}
}
and then, in your HTML:
<div class="page">
<!-- Page Contents -->
</div>
Or, if you have a footer under every page (for example for page numbering):
#media print {
footer {page-break-after: always;}
}
I need to create print version of website, and as I mention in title I need to display site logo just on first page. For example, if I print home page, and I get 5 pages, logo should be displayed just on first page.
is it possible with #media print ?
What I've tried so far but does not work
#media print {
#top-menu,
#main-navigation-sticky-wrapper,
#action-bar,
.teaser-cda,
.pre-footer,
.footer,
.post-footer,
.header .logo {
display: none;
}
#page:first {
.header .logo { display:block }
}
The correct syntax (according to MDN) for first page is:
#page :first {
/* .... */
}
You don't have a space between the two components. Be wary, however, as compatibility for #page :first is not well-defined.
It might not even be necessary though. I don't think block-level elements get repeated on every page, so you might just need to ensure that the logo is displayed in #media print { ... }.
You will also want to check the element and it's container elements to ensure that none of them have position: fixed as that may also cause the element to repeat on each printed page.
#page rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies only the page's dimensions, page orientation, and margins.
It can't have css class inside.
#page :first {...} it just allows you to add these previous styles on the first page but you can't also add a class inside.
I am attempting to use the markdown-pdf node library to generate a pdf document from a markdown document. It is producing the pdf but I cannot seem to get repeating footers working.
The footer is at the end of the document with the following code:
<div id="footer">
© 2013 MyCompany
</div>
And the CSS file I am including has the following in it:
#media print {
#footer {
position: running(footer);
}
}
#footer {position: relative ; left: 0px; bottom: 0px; right: 0px; font-size:10px; }
This produces nicely formatted code on the html page at the bottom left, but the test is not displaying as a page footer on any of the pdf pages.
Any help much appreciated.
I think there could be 2 problems:
[1] markdown-pdf don't read the element because:
"A running element is not shown in its natural place; there it is treated as if ‘display: none’ had been set. [...]" -> W3.org
[2] markdown-pdf don't read the element because it's only defined for media print. (Maybe markdown read in media screen?)
I hope this thougths could help you.
Possible "solvings":
try media all/screen
ask alanshaw if running elements are supported (if not use your relative Css settings)
I created a html page that provides to print his's content(window.print). I would like to add page footer for print version with the following CSS.
display: table-footer-group;
But I want to have a page footer in last page. The above CSS produces the page footer every page. How can I solve it? Thanks.
You can try something like that:
#page:last {
/* footer css here */
}
Additional reading.
I am trying to create an html page which will be used for printing data using browser. I need to include a footer with it which will show up in every page at the bottom when printed and I have developed the following code for implementing this.
The following code is working fine, but the problem is when my contents inside the div content gets long enough to make users scroll down the page, that time if I go to the print option of Google Chrome and see the print preview, I can see the footer shows up in the first page, but not in the rest of the pages. But this same code works in firefox and the footer shows up in all the printed pages(and even shows up in the print preview).
Could you please help me to show up the footer in every pages when printed using Google chrome?
Thanks :)
<html>
<head>
<style type="text/css">
html {margin:0;padding:0;border:0; overflow-y: scroll;}
body { font-size:75%;color:#222; font-family: Geneva, Arial, Helvetica, sans-serif;}
#container {margin:0 auto; height:100%; }
#content{}
#footer {position: fixed ; left: 0px; bottom: 0px; right: 0px; font-size:10px; }
</style>
</head>
<body>
<div id="container">
<div id="content">
My Contents
</div>
<div id="footer">This is my Footer</div>
</div>
</body>
</html>
Should have position: relative to parent element of footer
and it's parent element is body so give it to body or container
http://jsfiddle.net/jXujq/ See the CSS code...
For anyone still facing this issue, I've created an open-source library that could solve it. It allows printing repeated headers and footers from Chrome, depending on the structure of your html. See this answer:
https://stackoverflow.com/a/34444930/2196424
I've spent a lot of time on this footer thing, I was able to do it on IE using position: fixed and bottom 0, with some body margins to avoid the content from overlapping with the footer.
But with chrome, the only way I was able to do something similar was by using javascript to calculate the white space required to push the footer to the bottom (by assigning that value to an empty div): -
var printPageHeight = 1900; //(have to test this value)
var mFooter = $("#footer");
var bottomPos = mFooter.position().top + mFooter.height();
var remainingGap = (bottomPos <printPageHeight ) ? (printPageHeight -bottomPos) : printPageHeight - (bottomPos % printPageHeight );
$("#whiteSpaceToPositionFooter").css("height", remainingGap+"px");
However, getting the size/height of the print page right is very difficult and the height() method of jquery doesn't account for margins and heights.
You need to set in your footer:
position:fixed;
bottom:0;
Maybe this would help you?
CSS Sticky Footer