Advice needed - how to best show several small images

[patrik]

I'm helping a friend of mine making an epub from the kf8-original. (I have simply used kindleunpack to create the epub.)

(They are a non-profit organization and will make their book free for a couple of days at Amazon and would also like to have an epub offering for those not comfortable with Calibre & Alf.)

While doing this he asked if we could change some things.

There are a couple of sequences where there is a short instruction (text) and then several smallish images showing what to do. One example I'm looking at right now has 14 images.
They are now all showed in a long vertical line.
He asked if it was possible to have them beside one another.

I know enough about epubs to make my own from my documents, and have edited a few I have bought and converted from Amazon, but nowhere near enough.
I use Sigil.

Is it possible to have the images shown besides each other, if possible it would be more images on each row on devices with higher resolutionen.

I have played around with "float" to mix text and one image. Is it "float" to use for putting more than one image besides each other or are there better ways?

Another option would be for them to re-create the images, and thus making one new image that consists of 2-3 of the current smaller ones.

The images varies in size but are around 400x600.
The current code to show them look like this:
<p class="C272"><a id="id_20"></a><img alt="" height="145" src="../Images/image00156.jpeg" width="141" /></p>
<p class="C272"><a id="id_24"></a><img alt="" height="245" src="../Images/image00160.jpeg" width="146" /></p>

Ideas, advice, thoughts?

[patrik]

Here is an example how a page looks in the physical book.
In the ebook they are all separate smaller images, and shown under each other.

What is the best practise to show something like this?

(I have the book "Epub straight to the point". I would appriciate any pointers to any source/references that discusses this. Thanks. )

[DaleDe]

You can place them inline with text (even if the text is only spaces) or you can place them inside a table.

Dale

[Turtle91]

If you use 'float' then the number of images per row will change depending on the width of the device's screen.

css:
img {float:left; height:240px; width:160px; padding:5px}

<div>
<img alt="" src="../Images/1.jpg"/>
<img alt="" src="../Images/2.jpg"/>
<img alt="" src="../Images/3.jpg"/>
<img alt="" src="../Images/4.jpg"/>
<img alt="" src="../Images/5.jpg"/>
<img alt="" src="../Images/6.jpg"/>
<img alt="" src="../Images/7.jpg"/>
<img alt="" src="../Images/8.jpg"/>
</div>

If you wish to add text between images, then insert the image tag inside the paragraph:

css:
img {float:left; height:240px; width:160px; padding:5px}

<p><img alt="" src="../Images/1.jpg"/> Take two deep breaths....</p>

You can certainly use a table to place images exactly where you want, but I don't recommend it. There are too many issues with getting tables to work, and look, right on all the different sized screens.

Cheers,

[patrik]

DaleDe, Turtle91, thanks a bunch!

It was easier than I thought to simply put a fixed amount of images besides each other. I may play around with float later.

Right now I have choosen to have three images with a bit of space between them. It's about 500 pixels. Looking at the most common epub-readers, they have about 750-1080 pixel width. Is that ("500") a fairly safe choice to make? (If I get the time, I'm thinking of increasing the viewed size of the images a small bit, what is a good max width choice to make? 700 pixels?)

(If anyone would like the book, please send me a pm on the 15th and I will send you a link to Amazon.)

[patrik]

BTW, if I may ask another question....

I really don't understand why there are two css-files and what the difference between them are.

This is in the beginning of the html-files:

<link href="../Styles/style0001.css" rel="stylesheet" type="text/css" />
<link href="../Styles/style0002.css" media=" all" rel="stylesheet" type="text/css" />


The css-files contain the same classes, but are different??

p.C249 {
margin-top:35%;
margin-bottom:5%;
font-size:160%;
text-indent:0%;
text-align:left;
}

p.C249 {
margin-top:40%;
margin-bottom:5%;
font-size:140%;
text-indent:0%;
text-align:left;
}

How do I know what is actually used?

Edit.
Well, knowing which is used is simple of course. Changing them one at a time showed that it's the later one that enforces changes.

But why is the same class in two places? Guess I will have to re-read the chapters about css and stylesheets.

(It's made by amazon services, from a pdf created by InDesign.)