Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 09-13-2010, 03:39 PM   #1
luthar28
Enthusiast
luthar28 began at the beginning.
 
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;}
luthar28 is offline   Reply With Quote
Old 09-13-2010, 04:50 PM   #2
capidamonte
Not who you think I am...
capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.
 
capidamonte's Avatar
 
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>?
capidamonte is offline   Reply With Quote
Advert
Old 10-10-2010, 08:14 PM   #3
luthar28
Enthusiast
luthar28 began at the beginning.
 
Posts: 41
Karma: 10
Join Date: Jul 2010
Device: Kindle
Quote:
Originally Posted by capidamonte View Post
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?
luthar28 is offline   Reply With Quote
Old 10-11-2010, 09:10 AM   #4
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
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.
Jellby is offline   Reply With Quote
Old 10-11-2010, 11:01 AM   #5
luthar28
Enthusiast
luthar28 began at the beginning.
 
Posts: 41
Karma: 10
Join Date: Jul 2010
Device: Kindle
Quote:
Originally Posted by Jellby View Post
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.
luthar28 is offline   Reply With Quote
Advert
Old 10-11-2010, 11:57 AM   #6
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
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.
Jellby is offline   Reply With Quote
Old 10-11-2010, 04:40 PM   #7
ldolse
Wizard
ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.
 
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.
ldolse is offline   Reply With Quote
Old 10-11-2010, 06:56 PM   #8
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,688
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by ldolse View Post
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.
theducks is offline   Reply With Quote
Old 10-13-2010, 02:25 AM   #9
Skydog
Wizard
Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.
 
Skydog's Avatar
 
Posts: 2,243
Karma: 7400001
Join Date: Mar 2009
Location: Circling Earth @ Mach .83
Device: Elipsa 2E, Sage, Forma, Libra 2, Clara 2E, Kindle Oasis3, Voyage
Quote:
Originally Posted by ldolse View Post
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......"?
Skydog is offline   Reply With Quote
Old 10-13-2010, 04:11 PM   #10
ldolse
Wizard
ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.
 
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.
ldolse is offline   Reply With Quote
Old 10-13-2010, 04:47 PM   #11
Skydog
Wizard
Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.
 
Skydog's Avatar
 
Posts: 2,243
Karma: 7400001
Join Date: Mar 2009
Location: Circling Earth @ Mach .83
Device: Elipsa 2E, Sage, Forma, Libra 2, Clara 2E, Kindle Oasis3, Voyage
Quote:
Originally Posted by ldolse View Post
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.
Skydog is offline   Reply With Quote
Old 10-14-2010, 02:39 AM   #12
ldolse
Wizard
ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.
 
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.
ldolse is offline   Reply With Quote
Old 10-14-2010, 05:09 AM   #13
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
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>
Jellby is offline   Reply With Quote
Old 10-15-2010, 02:00 AM   #14
Skydog
Wizard
Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.
 
Skydog's Avatar
 
Posts: 2,243
Karma: 7400001
Join Date: Mar 2009
Location: Circling Earth @ Mach .83
Device: Elipsa 2E, Sage, Forma, Libra 2, Clara 2E, Kindle Oasis3, Voyage
Quote:
Originally Posted by ldolse View Post
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 is offline   Reply With Quote
Old 10-15-2010, 02:05 AM   #15
Skydog
Wizard
Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.Skydog ought to be getting tired of karma fortunes by now.
 
Skydog's Avatar
 
Posts: 2,243
Karma: 7400001
Join Date: Mar 2009
Location: Circling Earth @ Mach .83
Device: Elipsa 2E, Sage, Forma, Libra 2, Clara 2E, Kindle Oasis3, Voyage
Quote:
Originally Posted by Jellby View Post
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.
Skydog is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 02:30 AM.


MobileRead.com is a privately owned, operated and funded community.