View Single Post
Old 06-28-2016, 03:01 AM   #1
Psymon
Chief Bohemian Misfit
Psymon ought to be getting tired of karma fortunes by now.Psymon ought to be getting tired of karma fortunes by now.Psymon ought to be getting tired of karma fortunes by now.Psymon ought to be getting tired of karma fortunes by now.Psymon ought to be getting tired of karma fortunes by now.Psymon ought to be getting tired of karma fortunes by now.Psymon ought to be getting tired of karma fortunes by now.Psymon ought to be getting tired of karma fortunes by now.Psymon ought to be getting tired of karma fortunes by now.Psymon ought to be getting tired of karma fortunes by now.Psymon ought to be getting tired of karma fortunes by now.
 
Psymon's Avatar
 
Posts: 571
Karma: 462964
Join Date: May 2013
Device: iPad, ADE
Page breaks -- best practices?

Hey, folks...

I'm working on a Shakespeare book, and have run into a problem that I'm sure must be affecting all of my previous ebooks, too, but I just simply never noticed before -- it's only because I have a "header" image in this one that it suddenly became apparent.

Attached here is a screenshot (from my iPad) of my title page and the first page (inline ToC), as it is at the moment (which might change). Both are in the same file, with a page-break in-between, but I have no idea why the header image gets bumped down a little after the page break.

Here's the way I'm doing my page breaks now (which I'm sure I must have gotten from these forums at some point, since I don't think I would have come up with this way of doing it myself).

In my HTML I have...

Code:
  <div class="pagebreak">
    &nbsp;
  </div>
...and then my CSS for that is...

Code:
.pagebreak {
	page-break-before: always !important;
	margin: 0;
	padding: 0;
	line-height:0;
}
I can't imagine what's causing things to get bumped down a touch after a page break -- if there's a better (if not "best") way to do those, though, I'd be more than happy to change them all, in all my previous books, too.

I can upload a mini-version of my book with the first few pages, if necessary -- and thanks, as always, in advance!

EDIT: Oh, I should probably have included the code for where those header images are, too.

The HTML for that/those is...

Code:
  <p class="header"><img alt="ornament" src="../Images/header-black.gif"/></p>
...and this CSS...

Code:
p.header {
	font-size:100%;
	line-height: 138%;
	margin-top: 0;
	margin-bottom: 1em;
	padding: 0;
}
Attached Thumbnails
Click image for larger version

Name:	pagebreak.png
Views:	375
Size:	165.3 KB
ID:	149746  

Last edited by Psymon; 06-28-2016 at 03:26 AM.
Psymon is offline   Reply With Quote