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>
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.
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>
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.
For printing purposes, I removed the IMG element, but I wanted an H1 element to be displayed on another portion of the site when the IMG element is removed.
Is this possible?
You can use CSS media types for this.
Don't think of it as revealing one element when another is removed; instead think of it as selectively displaying elements depending on whether they are for print or screen.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
.screenonly { display: none; }
}
#media screen {
.printonly { display: none; }
}
</style>
</head>
<body>
<h1 class=printonly>Header for print</h1>
<h1 class=screenonly>Header for screen</h1>
</body>
</html>
Save this to a file and view it in a browser, and you will only see "Header for screen". Print the same page and you will instead see "Header for print".
This technique will work on any element and can be used to set any CSS style for print or screen.