Remove Page Break after Images

luthar28 · 09-13-2010, 04:39 PM

For some reason, I'm getting page breaks after images (they begin each chapter). These are small images (100px x 100px) so there's no reason it should be giving a pagebreak. I've gone through and added page-break: avoid in the css. Any ideas how to get it to flow without that pagebreak? There should be a page break before the image, but not after.

This is the code:
<div class="center"><img class="header" src="MTpic0001.png" alt="The Teacher" /></div></div><h2 id="c1">The Teacher</h2>

And this is the CSS:
img.header{max-width:250px;margin: 0 auto; page-break-before:always;page-break-after: avoid;}

h2 {font-weight: bold; text-align:center; margin-bottom:1.2em; page-break-before:avoid;}

capidamonte · 09-13-2010, 05:50 PM

What's the <div> CSS?

And why are there two </div> for only one <div>?

luthar28 · 10-10-2010, 09:14 PM

Quote:

Originally Posted by capidamonte

What's the <div> CSS?

And why are there two </div> for only one <div>?

Sorry...disappeared for a while.

I've really cleared back the CSS and Div tags to not confuse the issue.

Basically, I have an image that is supposed to appear at the top of of a new page, followed by the Chapter title. This is what I have:

<img class="header" src="MTpic0001.png" alt="The Teacher" />
<h2 id="c1">The Teacher</h2>

My css is as follows:
h2 {font-weight: bold; text-align:center; margin-bottom:1.2em; page-break-before:avoid;}

img.header{width:250px;margin: 0 auto;}

But what it's doing is putting the image (only 250 wide, 100 high), then a pagebreak, then the Chapter Title. I though maybe it had something to do with the TOC in Calibre...but even going without a TOC it still happens.

In Sigil, it separates the image into its own HTML file, followed by the chapter.

Any ideas?

Jellby · 10-11-2010, 10:10 AM

It is not allowed to have an <img> directly inside the <body>, you should wrap it a <div>, or put it inside the <h2> (think of the image as a word).

Try this:

Code:

<div class="header"><img src="MTpic0001.png" alt="The Teacher" /></div>
<h2 id="c1">The Teacher</h2>

Code:

div.header {text-align: center;}
div.header img {width: 250px;}
h2 {font-weight: bold; text-align:center; margin-bottom:1.2em; page-break-before:avoid;}

or adding "page-break-after: avoid;" to the div.header.

luthar28 · 10-11-2010, 12:01 PM

Quote:

Originally Posted by Jellby

It is not allowed to have an <img> directly inside the <body>, you should wrap it a <div>, or put it inside the <h2> (think of the image as a word).

Try this:

Code:

<div class="header"><img src="MTpic0001.png" alt="The Teacher" /></div>
<h2 id="c1">The Teacher</h2>

Code:

div.header {text-align: center;}
div.header img {width: 250px;}
h2 {font-weight: bold; text-align:center; margin-bottom:1.2em; page-break-before:avoid;}

or adding "page-break-after: avoid;" to the div.header.

I tried this method...still the same thing. I don't know...there must be something I've missed in the overall CSS. So I followed your design, and simply changed the h2 to a p (and then declared it as class="Chapter") for the TOC. Works well. I still would've liked to have known what was going on...but this will have to do.

Jellby · 10-11-2010, 12:57 PM

Maybe there's some other style file adding something to the <h2>. If you attach a complete epub file that shows the problem we can look further into it.

ldolse · 10-11-2010, 05:40 PM

It's because the image is inserted into it's own html file (you mentioned seeing this in Sigil). Each html flow will have page breaks around it. I see this sort of thing when someone converts the file using Calibre - Calibre's default settings insert page breaks before <h1> and <h2> tags, and then Calibre splits the file on page breaks. This is separate from the Chapter detection settings. You mentioned using Calibre at some point, so I suspect you may be doing some conversion for some reason. You need to tell Calibre not to insert page breaks at those points before you use it for conversion.

theducks · 10-11-2010, 07:56 PM

Quote:

Originally Posted by ldolse

It's because the image is inserted into it's own html file (you mentioned seeing this in Sigil). Each html flow will have page breaks around it. I see this sort of thing when someone converts the file using Calibre - Calibre's default settings insert page breaks before <h1> and <h2> tags, and then Calibre splits the file on page breaks. This is separate from the Chapter detection settings. You mentioned using Calibre at some point, so I suspect you may be doing some conversion for some reason. You need to tell Calibre not to insert page breaks at those points before you use it for conversion.

You cah use Sigil's: "Merge with Previous, to glue the page following, back onto the Images page.

Skydog · 10-13-2010, 03:25 AM

Quote:

Originally Posted by ldolse

It's because the image is inserted into it's own html file (you mentioned seeing this in Sigil). Each html flow will have page breaks around it. I see this sort of thing when someone converts the file using Calibre - Calibre's default settings insert page breaks before <h1> and <h2> tags, and then Calibre splits the file on page breaks. This is separate from the Chapter detection settings. You mentioned using Calibre at some point, so I suspect you may be doing some conversion for some reason. You need to tell Calibre not to insert page breaks at those points before you use it for conversion.

But how does one "tell Calibre not to insert page breaks at those points......"?

ldolse · 10-13-2010, 05:11 PM

It's in the conversion options, under structure detection. I think the default is:

Code:

//*[name()='h1' or name()='h2']

Which will insert page breaks before all <h1> and <h2> tags. Just change it to '/' to disable it.

Skydog · 10-13-2010, 05:47 PM

Quote:

Originally Posted by ldolse

It's in the conversion options, under structure detection. I think the default is:

Code:

//*[name()='h1' or name()='h2']

Which will insert page breaks before all <h1> and <h2> tags. Just change it to '/' to disable it.

Thank you, Idolse, but I am having the page break problem with '/' as the default. Calibre is inserting page breaks before and after my images instead of keeping them at the top of the page of each new chapter.

I'm not familiar enough with html to know exactly what is wrong, but the image file is contained within <div> tags prior to the <h2> tags.

ldolse · 10-14-2010, 03:39 AM

Not sure, would need to see the book or perhaps the output log from Calibre's conversion. Did you change it to '/' in Calibre's preferences or in the conversion options for the specific book? Changing it in the preferences wouldn't fix it for that specific book, as you've already converted using the old setting and that will be remembered for that specific book.

Also if you've already converted the book before then the damage has been done unless you have your original un-split source.

The only other reason for page breaks is if they were previously defined in the html/css.

Jellby · 10-14-2010, 06:09 AM

If the problem is calibre inserting the pagebreak before <h2>, you can just include the image in the <h2>:

<h2 id="c1"><img src="MTpic0001.png" alt="The Teacher" /><br/>
The Teacher</h2>

Skydog · 10-15-2010, 03:00 AM

Quote:

Originally Posted by ldolse

Not sure, would need to see the book or perhaps the output log from Calibre's conversion. Did you change it to '/' in Calibre's preferences or in the conversion options for the specific book? Changing it in the preferences wouldn't fix it for that specific book, as you've already converted using the old setting and that will be remembered for that specific book.

Also if you've already converted the book before then the damage has been done unless you have your original un-split source.

The only other reason for page breaks is if they were previously defined in the html/css.

Idolse,

The "book" is something I am compiling a chapter at a time. I accomplished this once before, with another project, using an earlier version of Sigil and it worked flawlessly. I am using the same css as before but haven't figured out why the images are not remaining at the beginning of each chapter this time around.

I suspect my lack of experience/knowledge with html isn't helping or it would probably be obvious.

Skydog · 10-15-2010, 03:05 AM

Quote:

Originally Posted by Jellby

If the problem is calibre inserting the pagebreak before <h2>, you can just include the image in the <h2>:

<h2 id="c1"><img src="MTpic0001.png" alt="The Teacher" /><br/>
The Teacher</h2>

Thank you, Jellby - I will give that a try.

09-13-2010, 04:39 PM	#1
luthar28 Enthusiast Posts: 41 Karma: 10 Join Date: Jul 2010 Device: Kindle	Remove Page Break after Images For some reason, I'm getting page breaks after images (they begin each chapter). These are small images (100px x 100px) so there's no reason it should be giving a pagebreak. I've gone through and added page-break: avoid in the css. Any ideas how to get it to flow without that pagebreak? There should be a page break before the image, but not after. This is the code: <div class="center"><img class="header" src="MTpic0001.png" alt="The Teacher" /></div></div><h2 id="c1">The Teacher</h2> And this is the CSS: img.header{max-width:250px;margin: 0 auto; page-break-before:always;page-break-after: avoid;} h2 {font-weight: bold; text-align:center; margin-bottom:1.2em; page-break-before:avoid;}

10-11-2010, 10:10 AM	#4
Jellby frumious Bandersnatch Posts: 7,537 Karma: 19000627 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	It is not allowed to have an <img> directly inside the <body>, you should wrap it a <div>, or put it inside the <h2> (think of the image as a word). Try this: Code: <div class="header"><img src="MTpic0001.png" alt="The Teacher" /></div> <h2 id="c1">The Teacher</h2> Code: div.header {text-align: center;} div.header img {width: 250px;} h2 {font-weight: bold; text-align:center; margin-bottom:1.2em; page-break-before:avoid;} or adding "page-break-after: avoid;" to the div.header.

10-13-2010, 05:11 PM	#10
ldolse Wizard Posts: 1,337 Karma: 123455 Join Date: Apr 2009 Location: Malaysia Device: PRS-650, iPhone	It's in the conversion options, under structure detection. I think the default is: Code: //*[name()='h1' or name()='h2'] Which will insert page breaks before all <h1> and <h2> tags. Just change it to '/' to disable it.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Remove all images and Covers?	Pselus	Calibre	4	03-18-2015 03:47 AM
iPad Page Break Doesn't support iPad?	bala07	Apple Devices	9	11-10-2010 08:21 AM
Why two separate page break xpaths in 0.6.x?	ldolse	Calibre	3	08-12-2009 02:00 PM
Page break before h2 question	Amalthia	Calibre	9	04-17-2009 07:33 PM
Page break before <b>	flowoeB	Calibre	14	04-12-2009 04:05 PM

09-13-2010, 05:50 PM	#2
capidamonte Not who you think I am... Posts: 374 Karma: 30283 Join Date: Jan 2010 Location: Honolulu Device: PocketBook 360 -- Ivory	What's the <div> CSS? And why are there two </div> for only one <div>?

10-11-2010, 12:57 PM	#6
Jellby frumious Bandersnatch Posts: 7,537 Karma: 19000627 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Maybe there's some other style file adding something to the <h2>. If you attach a complete epub file that shows the problem we can look further into it.

10-11-2010, 05:40 PM	#7
ldolse Wizard Posts: 1,337 Karma: 123455 Join Date: Apr 2009 Location: Malaysia Device: PRS-650, iPhone	It's because the image is inserted into it's own html file (you mentioned seeing this in Sigil). Each html flow will have page breaks around it. I see this sort of thing when someone converts the file using Calibre - Calibre's default settings insert page breaks before <h1> and <h2> tags, and then Calibre splits the file on page breaks. This is separate from the Chapter detection settings. You mentioned using Calibre at some point, so I suspect you may be doing some conversion for some reason. You need to tell Calibre not to insert page breaks at those points before you use it for conversion.

10-14-2010, 03:39 AM	#12
ldolse Wizard Posts: 1,337 Karma: 123455 Join Date: Apr 2009 Location: Malaysia Device: PRS-650, iPhone	Not sure, would need to see the book or perhaps the output log from Calibre's conversion. Did you change it to '/' in Calibre's preferences or in the conversion options for the specific book? Changing it in the preferences wouldn't fix it for that specific book, as you've already converted using the old setting and that will be remembered for that specific book. Also if you've already converted the book before then the damage has been done unless you have your original un-split source. The only other reason for page breaks is if they were previously defined in the html/css.

10-14-2010, 06:09 AM	#13
Jellby frumious Bandersnatch Posts: 7,537 Karma: 19000627 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	If the problem is calibre inserting the pagebreak before <h2>, you can just include the image in the <h2>: <h2 id="c1"><img src="MTpic0001.png" alt="The Teacher" /><br/> The Teacher</h2>

Advert

Advert