View Full Version : Images always show on new page, even if there's only 1 line of text on previous pg


SarahMB
01-13-2013, 06:19 PM
Hello, I am working with a lot of images in my book. I would like them to size to 100% width and for the flow of text to continue normally before and after. The images seem to automatically size to 100% width, but they always jump to the next page. This happens even if there is plenty of room for the image on the previous page.

So, some pages look weird because there is one sentence and then nothing until the image shows up on the next page.

I hope I'm explaining this well enough :chinscratch: Thank you in advance for your help!

theducks
01-13-2013, 07:19 PM
Hello, I am working with a lot of images in my book. I would like them to size to 100% width and for the flow of text to continue normally before and after. The images seem to automatically size to 100% width, but they always jump to the next page. This happens even if there is plenty of room for the image on the previous page.

So, some pages look weird because there is one sentence and then nothing until the image shows up on the next page.

I hope I'm explaining this well enough :chinscratch: Thank you in advance for your help!

100% would fill available (screen) space. You already have something within that space, so 100% is not available... new page :smack:

SarahMB
01-13-2013, 07:55 PM
100% would fill available (screen) space. You already have something within that space, so 100% is not available... new page :smack:

Thanks for your response. I guess I wasn't clear enough. These images are wide and long and do not fill up the screen height. For example, 600 px wide and 200 px tall.

ElMiko
01-13-2013, 08:16 PM
what is the code (and any associated classes) that you're using for both the image and for the body text? What program or reader is having the rendering problem?

Toxaris
01-14-2013, 04:28 AM
Yup, without code examples of what you are doing we cannot say anything. It should be perfectly possible to have the effect you want, as long as the image fits under the paragraph directly above it.

theducks
01-14-2013, 05:00 AM
Thanks for your response. I guess I wasn't clear enough. These images are wide and long and do not fill up the screen height. For example, 600 px wide and 200 px tall.

100% applies to the space, not the image.
100% says fill the screen space.

mrmikel
01-14-2013, 06:05 AM
If you put the images inside a div or paragraph with some text or breaks this can happen because everything inside is considered as one unit by some readers.

Jellby
01-14-2013, 07:35 AM
100% applies to the space, not the image.
100% says fill the screen space.

But it's 100% width, there should be enoug vertical space, if I understood correctly.

Toxaris
01-14-2013, 08:38 AM
We can't be sure until we have seen some code.

theducks
01-14-2013, 08:53 AM
We can't be sure until we have seen some code.

there is that ;)

SarahMB
01-18-2013, 03:23 PM
Hi everyone. Sorry about the delay in getting back.

The code for the images is very simple, so I don't know why it behaves this way. Here is an example of the code as I see it in Sigil - <img alt="fig14.b_theNetDrill_wrong" src="../Images/fig14.b_theNetDrill_wrong.jpg" />

Then I am opening the book in Calibre and pre-viewing it there. This is such a weird quirk, and I imagine it would be very confusing to a reader to have large gaps in the text when there is no good reason (as it is not the end of a chapter or preceding a full page picture).

Also, I checked to be sure the img tag is not inside a <p> tag. It was, I changed it - but that did not solve the problem.

Thanks again for your help!

SarahMB
01-18-2013, 03:37 PM
So I think I figured it out. My code was too simple. For some reason if you don't specify alignment it pushes the image to start on the next page. Not sure why it works that way, but when I added align="left" it stopped it from jumping to the next page.

Thanks again for everyone's help! Truly, I really appreciate it

Jellby
01-19-2013, 03:12 AM
Note that the <img> tag must be inside a block element (a <p> or a <div>, typically). If it isn't, it is not valid XHTML and not a valid ePub... and the result is undefined.

Note also that the "alt" attribute should be some description of the image, to be used when the image cannot be displayed (think text-to-speech). If the image is simply decorative, leave it emply (alt=""), but do not write some cryptic meaningless stuff like "fig14.b_theNetDrill_wrong".

SarahMB
01-19-2013, 04:37 PM
Jellbey, thanks for the good advice.