I have a cover letter and resume together in seperate divs on one html web page.
When I try print preview half of my resume is on the cover letter page.
Is there any way to ensure that the two divs print on seperate pages?
You can use the following CSS...
#cover-letter {
page-break-after: always;
}
Related
I had created a bill format in HTML and when I am viewing it in browser it viewed perfectly but when I am trying to print it is breaking in 2 pages. I am attaching my html code here for reference:-
I had uploaded code on jsfiddle and here is the link of the code
https://jsfiddle.net/rohitarya/oyucgz4k/1/
That is because your table doesn't fit on A4 format. Try to make less paddings and make a font smaller. It could help you.
To add line breaker you could make CSS class for example linebreaker or any you would like:
#media print {
.linebreak { page-break-before: always; }
}
Then just add an empty DIV with this class where you need to make a line break:
<div class="linebreak"> </div>
I have many divs that proposed to be printed - on different pages.
How can I make sure that when the user is clicking the print button, each div will be on a different page?
Thanks!
You can use the page-break-after attribute in the print media query. The advantage is, that you don't have to change the size of your divs, it just makes sure that the page break will be after the div.
#media print {
div {
page-break-after: always;
}
}
More information about page-break-after on MDN.
In css, there is a media query you can use to specifically format your web page for when you want to print it:
#media print {
/* insert your style declarations here */
div {
page-break-after: always; /* ensures the next will we appear on new page */
}
}
You can use this media query to make each div fill up an entire page when the user decides to print. You can use this to modify things like removing the navbar when the user decides to print.
On the other hand, to avoid direct breaks after a certain element use page-break-after: avoid;
You can also for the use to print in a certain format that you want to specify using the follow:
#page {
size: A4; /* or A4 landscape or A5 */
}
I have my course book as html parts chapter-by-chapter. I have done some modifies on it. It seems very well when it is read on webpage but when I want to convert it to pdf or print it it seems narrow. The issue is that how the page can be fitted in A4. If you look at output.pdf which can be found on main page. Besides, the shared links for you understand me. (especially page 47). I can merge them just in a pdf file. I think that if the css can be edited, it will be fitted in A4 and seems in pdf like a book. I need your helps. As an example you can look at ch18.html and ch19.pdf I can't write other links because of reputation. But all files can be looked from main page.
Pages: http://bookfiles.host-ed.me/ch18.html and ch19.html
Css file: http://bookfiles.host-ed.me/static/CACHE/css/ab0ffefbadc3.css
I absolutetly newbie about css. Thank for your helps.
The issue appears to be with your max-width on your "document" div. You have it set at several different places in your css file based on the screen size. I would go through them one by one and find the one that is affecting your print file. You need to set your max-width to 100%. Having a max-width less than 100% is what is causing it to print narrow.
Once you identify which one is causing the problem, you can add a new style that only goes into affect when you print.
Add this to your CSS file, for example:
#media print and (color){
#lesson-fragment, [role="document"] {
width: 100%;
max-width: 100%;
}
}
You can also put other specific print styles inside of the #media print code. Like if you wanted to change the font size or color only when it printed.
I have html page that generate report it contains sections and sub-sections.
Code has many tables and sub tables and div tags.
I want to apply page break when any section heading reach the end of the page.
Specifically "don't want heading at the end of the page while printing"
If you want to use specific page break, when printing, you can set this with CSS like the following :
CSS :
#media print {
.page-break { display: block; page-break-before: always; }
}
HTML :
<!-- any content -->
<div class='page-break'></div>
By doing this you'll manually break the page at this tag.
When I use the page break attribute and then look at my page from i.e7 and click print preview, it generates 3 blank pages between the first and second page.
I have copied some sample code here: http://jsfiddle.net/vW54X/embedded/result/
You can't really replicate the error though because its embedded as an iframe
IE7 does funny things with page-break-after:always.
Instead of applying it to your div#cl, create a new, empty p or div and apply it to that. Place that after the #cl, so
<div id-"cl">
//all your content
</div>
<div class="pageBreak"> </div>
Style it with page-break-after: always but hide it until print.
The solution is giving your body a height: auto;
When I had a similar problem, I resolved it by setting the maximum height of each of my <div>s to a very small amount and gradually increasing it until the problem appeared again.
Basically, just this:
.your-container-div {
max-height: 27.4cm;
}