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.
Related
Running in W3's TryitEditor I currently have CSS:
p.hr {
position: running(header)
}
#media print {
.pagebreak { page-break-before: always; }
#page {
#top-center {
content: element(header);
}
}
}
an HTML element:
<p class = 'hr' >Heading placeholder</p>
and basic script to print:
<script>window.print()</script>
I believe I have the right method, but when I run the page, the print preview shows up with my header only on the first page. Is this an issue of my CSS, my methods, my iOS browser, or W3's HTML environment not being equipped to handle #page settings? Thanks.
Unfortunately, #page is not supported in Safari.
https://developer.mozilla.org/en-US/docs/Web/CSS/#page
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.
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
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>