Problems with headers can anyone help?

[indieauthor83]

Hi,

I've created a mobi file that I'm really happy with it, but I'm having trouble with my headers. Here's my html code:

<div style="page-break-after:always">
<p align="center">
<a name="whatisconfidence">
<img src="meonbeach.jpg" border="0" height="433" width="247"/></a></p></div>
<p><h2>What is confidence?</h2>

Just to point out, I only added the 'page-break-after:always' because the image was appearing on a seperate page. But it still hasn't made a difference.

I basically want the above image to appear on the same page as the H2 header. But by default the H2 header starts at the top of the screen on a seperate page. So my image that I want to appear at the top of the screen before the header, now is alone on it's own page, looking out of place.

Can anyone help me with this?

Thanks in advance

Zoe

[dgatwood]

That should be page-break-after: avoid. A div with PBA: always would force a page break after the div and before the h2, which would mean the h2 tag (which is outside the div) would always be on the top of a separate page. Bear in mind that most readers ignore page-break-after: avoid, however, so if you really want to force them into one page whenever possible, you'd probably need to wrap a div around the img and h2 tags and use page-break-inside: avoid, which at least some readers support.

Also, heading tags are block-level tags, and are not allowed inside a paragraph. Move it outside.

[RbnJrg]

One question: before the image (and in the same page), is there text? Or you only want the image and the caption are in the same page but no matter the text that is before and after of that image and caption? I ask you this because the height of your image is quite big (433 px) and is difficult that the picture (and its caption) remain in the same page if there must be text before them. In the second case (image and caption on the same page regardless of the previous and back text) is easy to get what you want; in the first case the solution is not very difficult but I'm afraid that won't work on older Kindle models (those who don't support the .kf8 format) but I'll wait your answer before writing a possible solution.

[Hitch]

Originally Posted by indieauthor83

Hi,

I've created a mobi file that I'm really happy with it, but I'm having trouble with my headers. Here's my html code:

<div style="page-break-after:always">
<p align="center">
<a name="whatisconfidence">
<img src="meonbeach.jpg" border="0" height="433" width="247"/></a></p></div>
<p><h2>What is confidence?</h2>

Just to point out, I only added the 'page-break-after:always' because the image was appearing on a seperate page. But it still hasn't made a difference.

I basically want the above image to appear on the same page as the H2 header. But by default the H2 header starts at the top of the screen on a seperate page. So my image that I want to appear at the top of the screen before the header, now is alone on it's own page, looking out of place.

Can anyone help me with this?

Thanks in advance

Zoe

Zoe:

You are thinking about it backwards. Do it like this:

<div> (lose the page-break after here, it's wrong)
<h2> <img src="meonbeach.jpg" border="0" height="433" width="247"/></h2></div>
<h2>What is confidence?</h2></div>

And then simply don't display the first h2. That's all there is to it. Create an appropriate class for the image. You don't need the div, actually, but...and why is the link there? Is that for your HTML TOC? If it is, put the link to the html PAGE, not the heading. If you have everything in one big long file (I think I recall that's the case, is that right?), then give the h2 heading that encases the image an id, and link to that, e.g., "chap12" or whatever it is. Does that make sense to you? YOU're using the Calibre ePUB or HTML editor (I don't use that, myself, so I don't know which terminology is right).

Hitch

[indieauthor83]

Thanks for this reply!

I didn't realise you were on here.

I ran my file through the w3org validator earlier and it brought up errors. So I have given it up as a bad-job for now. My little boy needs my full attention. So I'm going to leave it to the professionals!

If I wasn't a full-time mum, with a house to run and work to do, I would be enjoying learning coding. I've learnt a lot, but I realise there's so much more to learn, and I don't have the time unforunately.

I've sent the file to you, if you get chance to look at it.

Thanks

Zoe.

[eschwartz]

Originally Posted by Hitch

YOU're using the Calibre ePUB or HTML editor (I don't use that, myself, so I don't know which terminology is right).

Hitch

Just ebook editor, it doesn't discriminate.

(It handles multiple formats -- EPUB and AZW3, and DOCX or HTML as input only.)

[Hitch]

Originally Posted by indieauthor83

Thanks for this reply!

I didn't realise you were on here.

I ran my file through the w3org validator earlier and it brought up errors. So I have given it up as a bad-job for now. My little boy needs my full attention. So I'm going to leave it to the professionals!

If I wasn't a full-time mum, with a house to run and work to do, I would be enjoying learning coding. I've learnt a lot, but I realise there's so much more to learn, and I don't have the time unforunately.

I've sent the file to you, if you get chance to look at it.

Thanks

Zoe.

This is where I "hang with my peeps," basically. It's like a moderately quasi-secret pub for geeky ebook-makers. I haven't been in since last (Saturday) evening, but I'll look at the file first thing in the morning.

Hitch

[Notjohn]

Originally Posted by indieauthor83

Hi,


<img src="meonbeach.jpg" border="0" height="433" width="247"/>

Be aware that if you use absolute sizes for an image, it will display very differently on different devices (basically, large on the older e-ink Kindles and small on the newer hi-rez tablets).

[AThirstyMind]

Notjohn, what should the line of code say? <img src= ?> so that I don't use absolute size? I haven't been satisfied with the size displayed on the newer devices now that you mention it.

[Hitch]

Originally Posted by AThirstyMind

Notjohn, what should the line of code say? <img src= ?> so that I don't use absolute size? I haven't been satisfied with the size displayed on the newer devices now that you mention it.

Thirsty:

Be aware that there is no good "one size fits all" solution. The HD devices will display the image pixel-for-pixel, if the size is not set. If you set the size, as shown previously, again, it will display pixel-for-pixel at the stated size, which would be dreadfully small on, say, a Fire HD or an HDX. If you set a percentage, then you'll run into problems with the older Kindles, which will simply blow the image up to "as large as possible," as the older devices only ever contemplated a full-page cover.

At my shop we use media queries; we display an image at size x for the KF7's, and we display it with percentages for KF8's. It's the only way to work around the problem, if you're trying to get it exactly right on all devices.

Hitch

[Notjohn]

Originally Posted by AThirstyMind

Notjohn, what should the line of code say? <img src= ?> so that I don't use absolute size? I haven't been satisfied with the size displayed on the newer devices now that you mention it.

Hitch (who knows much more about all this than I do) doesn't like this solution, but I use percentages, most often width="100%" but sometimes smaller, as in width="12%" for a title page publisher's colophon, or even width="60%" for an image that if enlarged to the max would look sub-standard. Be aware that the early-model Kindles will ignore such instructions (not a problem with the 100% solution, since all images in those devices are shown full screen unless very tiny) and so will the iPad and perhaps iPhone running the Kindle app.

And of course I now upload larger images, generally 800 pixels wide by whatever height is appropriate. Others use 1000 pixels.

This is not a perfect solution across all platforms and devices, but it's "good enough for government work," as we used to say in the defense industry. Hitch doesn't work for the Pentagon, so of course she has higher standards.