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.
Related
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
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.
Not referring to the URL at top of page.
When an <a> tag is printed in Chrome, it shows the URL after it.
Instead of just showing the anchor text (like this: StackOverflow)
It shows the anchor text w/ URL after it
(like this: StackOverflow (window.open('www.stackoverflow.com'))
This makes the printed page stretch off the printable area, and I'm trying to avoid this from happening. Can this setting be disabled somehow in printing mode or is there a #media print style that can be defined to remove this URL part from print screen?
Tell it not to print anything after the anchor tag.
#media print {
a:after { content:''; }
a[href]:after { content: none !important; }
}
Simply use this,
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
How do I declare that a DIV should be displayed in top-left corner of every page and not in its relative position.
I have a div like:
<div id=header>Document</div>
and I would like to display it on every page in top left corner using css like:
#page {
size: 8.5in 11in;
margin: 0.25in;
border: thin solid black;
padding: 1em;
#top-left {
content: ???? ;
}
}
Thank you.
I realise that this question is a bit old, but for anyone like me who comes here searching for a way to do this, it is possible using CSS3 running elements: http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1
In this example, the header is hidden from view in all media types except print. On printed pages, the header is displayed top center on all pages, except where h1 elements appear.
<style>
div.header { display: none }
#media print {
div.header {
display: block;
position: running(header);
}
#page { #top-center { content: element(header, last-except) }}
</style>
...
<div class="header">Introduction</div>
<h1 class="chapter">An introduction</div>
Doesn't
#header {
position: fixed;
top: 0;
left: 0;
}
work? See Printing Headers. Also, have a look at the W3C specification of position: fixed.
EDIT: if I read the CSS 3 specs concerning Margin Boxes well enough, together with the CSS 2.1 specs about the content property, I don't think you can embed a <div> from your page into the contents of a Margin Box, alas.
i had created one web page with header image (style="background-repeat: repeat-x;"). I have need print this page. Then print preview click and i see 2 pages. first page top position include header image and then 2 page is same header images included, but i need only first page with header image, 2 page don't need header image. please help me
Unfortunately, that's how Firefox function, each new print page is like an individual web page.
I would recommend you use a "print" specific CSS by removing the body background and having a block header visible only in print.
Here's an example:
<html>
<head>
<style type="text/css">
body {
background: url(topbg.jpg) repeat-x;
}
div#printheader { /* Do not display for other non-print media */
display: none;
}
#media print { /*CSS for print*/
body {
background: none;
}
div#printheader {
display: block;
}
}
</style>
<body>
<div id="printheader"><img src="topbg.jpg" /></div>
.
.
.
.
.
</body>
</html>