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 06-05-2013, 08:50 AM   #16
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
I put the code I gave you...with minor modification (below)... into sigil and came up with the following for Sigil and ADE...seemed to work fine. I've also attached the actual test epub if that helps.

CSS:
Code:
div.FrameSmall {clear:left; width:100%}
div.Float-L {float:left; margin:0 15px}
p {text-align:justify; margin:0 0 .5em; text-indent:0}
HTML:
Code:
<body>
  <p>...and is represented chemically as CH4. It is often shown pictorially as:</p>

  <div class="FrameSmall">
    <div class="Float-L"><img alt="" src="../Images/Methane15-1.png" /></div>

    <p class="First6">Methane where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p>
  </div>

  <div class="FrameSmall">
    <div class="Float-L"><img alt="" src="../Images/Ethane15-2.png" /></div>

    <p class="First6">Carbon can also share a single electron pair with another carbon atom, with hydrogen providing the remaining three available bonds. In such a case, the resulting compound is ethane (C2H6), which is depicted on the left.</p>
  </div>

    <p>Methane and ethane are but simple compounds ...</p>
</body>

edit: oops...I added an extra "Methane" to the paragraph next to the methane pic.
Attached Thumbnails
Click image for larger version

Name:	Sigil.png
Views:	36
Size:	16.0 KB
ID:	106655   Click image for larger version

Name:	ADE.png
Views:	34
Size:	35.5 KB
ID:	106656  
Attached Files
File Type: epub float.epub (5.7 KB, 16 views)

Last edited by Turtle91; 06-05-2013 at 08:53 AM.
Turtle91 is offline   Reply With Quote
Old 06-05-2013, 11:08 AM   #17
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 9,615
Karma: 5071748
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
Quote:
Originally Posted by eggheadbooks1 View Post
Because jpegs were sent to me by the client, and because the ePub will be converted to Kindle as well and in the past they handled PNGs badly (sometimes converting backgrounds to black). Perhaps that has changed?

Michelle
there is nothing wrong with using jpg and png won't give much smaller files. jpg has an option for gray scale support and it does fine. You are correct that Kindle converter will convert png files anyway.

Dale
DaleDe is offline   Reply With Quote
Old 06-05-2013, 11:14 AM   #18
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: 6,146
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
The problem with JPG is not black/white or grayscale, it's line art. Whenever the original image is a clear line drawing with sharp borders and plain colours, JPG will only ruin it, at the expense of creating an even larger file, while PNG is the perfect solution there. If Kindle is a problem you can always convert them to GIF for them.
Jellby is offline   Reply With Quote
Old 06-05-2013, 12:01 PM   #19
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Hi Turtle:

You're right, I had a margin left over from the code's previous iteration.

Getting closer (see jpeg). But the margin is still large. Maybe that's as good as it will get?

Michelle

Code:
<div class="FrameSmall">
    <div class="Float-L"><img alt="methane" src="../Images/methane.jpg" width="40%" /></div>

    <p class="First6">where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p>
  </div>

div.FrameSmall{
	width:100%;
	clear:left;
}
div.Float-L{
	float:left;
	margin:0px;
}
 p.First6, li.First6, div.First6
        {mso-style-name:First6;
        margin-top:0em;
        margin-right:0em;
        margin-bottom:.6em;
        margin-left:0em;
        text-align:justify;
        text-indent:0em;
        font-size:1.2em;
        font-family:"serif";}
Attached Thumbnails
Click image for larger version

Name:	ADE7.jpg
Views:	33
Size:	352.4 KB
ID:	106657  
eggheadbooks1 is offline   Reply With Quote
Old 06-05-2013, 01:16 PM   #20
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
Ahhh...you've left width="40%" in your <img> tag...that is taking up 40% of your div container even though the picture is much smaller.

Take it out completely like I did - or - set a max-width:Xpx (where X is the largest number of pixels you want it to take up)...I think those images were about 80px wide IIRC.

Cheers,
Turtle91 is offline   Reply With Quote
Old 06-05-2013, 01:18 PM   #21
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Hi Turtle:

I think I see the problem. In your successful case, you made the image smaller and set it to a fixed size; I'm trying to set it to a percentage so it will enlarge with the user's screen. Perhaps, then, what I have is the closest I'll get if I want to keep the percentage option?

Thanks for all your help. You've been wonderful.

Michelle
eggheadbooks1 is offline   Reply With Quote
Old 06-05-2013, 01:30 PM   #22
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
As for image size...how large (kb) are the jpg files for methane and ethane?

I took a screen shot of the image you had before, cropped it, and saved as an indexed png to get these (1.4kb and 1.3kb respectively). Even if you only save 2-3kb per image, I would imagine you will have a lot of images in that kind of book and that equates to a significant savings in file size. You would also probably get much better quality than I did because you are working with the originals.

Name:  Methane15-1.png
Views: 77
Size:  1.4 KB

Name:  Ethane15-2.png
Views: 77
Size:  1.3 KB
Turtle91 is offline   Reply With Quote
Old 06-05-2013, 02:00 PM   #23
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
The difference in size between the jpeg and png is about 30 - 40%. About half his images are line art or text only, the other half are continuous tone (where the jpeg is smaller and better than the png). Some are in-between, probably 256-color. The client sent me fairly large jpegs, most of which have had to be downsized for the ebooks, so I should be able to get a decent png. I did a quick text of two images; the quality was nearly identical but the file size was about -30%.

Thanks again,
Michelle
eggheadbooks1 is offline   Reply With Quote
Old 06-05-2013, 02:03 PM   #24
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
Setting the width as a percentage is just telling it what percentage of the container to use. If you set it at 50% then it will take up half of the div...which itself is set to fill the screen with a width of 100%...so effectively you are saying take up half of the screen for this image. Scaling the image in this manner doesn't work for what you want to do.

With an ebook's reflowable nature, the words will automatically fill the extra landscape that a larger display provides...they do NOT automatically increase in font size.

What I think you want is to increase the image when the FONT size is increased to keep the same proportion between the image and font.

You can do that by assigning the width to an "em". If you want the image to be the same height as 3 letters/lines you could say "width:3em" in your CSS. With that method you run the risk that the image would just get distorted/blurry as it was stretched too far, so you can add a maximum pixel width to say "none shall pass" this size. Similarly, you might have an image that is way too small if they are using miniscule font size, so you can add a minimum-width. It's up to you to determine the maximum, minimum and normal size you are comfortable with.

CSS
.image {width:3em; max-width:200px; min-width:50px}

HTML
<div class="Float-L"><img alt="methane" src="../Images/methane.jpg" class="image" /></div>
Turtle91 is offline   Reply With Quote
Old 06-05-2013, 03:09 PM   #25
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Yes, I understand it is the width of the container, but the container also changes as the device width changes, so that works. And while the image remains static even as the font size changes, so far at least it is staying attached to the text.

I will try scaling using ems. I didn't realize I could do that with images.

Also, re: the maximum image size: last year I had a situation where I wanted the image to be 100% of the container, but not to exceed a maximum size (to prevent upsizing) and the solution then was an SVG container. I will try your method and see if that works for what I needed then, too. It's less complicated than the SVG container.

Michelle

Actually, I just noticed the .image in the CSS. To make that work for images of various sizes, I would have to make an .image for each different size. So maybe the SVG container is still best overall, and I will make a new image div class just for these two problem images.

Last edited by eggheadbooks1; 06-05-2013 at 03:12 PM. Reason: addendum
eggheadbooks1 is offline   Reply With Quote
Old 06-05-2013, 07:06 PM   #26
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 9,615
Karma: 5071748
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
Quote:
Originally Posted by eggheadbooks1 View Post
Yes, I understand it is the width of the container, but the container also changes as the device width changes, so that works. And while the image remains static even as the font size changes, so far at least it is staying attached to the text.

I will try scaling using ems. I didn't realize I could do that with images.

Also, re: the maximum image size: last year I had a situation where I wanted the image to be 100% of the container, but not to exceed a maximum size (to prevent upsizing) and the solution then was an SVG container. I will try your method and see if that works for what I needed then, too. It's less complicated than the SVG container.

Michelle

Actually, I just noticed the .image in the CSS. To make that work for images of various sizes, I would have to make an .image for each different size. So maybe the SVG container is still best overall, and I will make a new image div class just for these two problem images.
If you plan to make images different sizes you can give them id's and use the id's for CSS or you can use a CSS style inside the image statement itself.

Dale
DaleDe is offline   Reply With Quote
Old 06-05-2013, 07:16 PM   #27
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Turtle:

Alas, not working. The image class that specifies an em value for the image isn't being recognized by ADE, so the full size of the image is being displayed. Is that HTML5? ADE doesn't read HTML5 even though some readers will.

And if I try to add the em value div along with the percentage value so the image will scale, the image class is ignored.

(BTW, the p class is important, otherwise the em value for the text is ignored and screwed up in relation to the rest of the book.)

Here's my tests:

CSS:

Code:
div.imageEM{
	height:5em;
	max-width:225px;
	min-width:110px;
}
div.Float-L{
	float:left;
}
div.FrameSmall{
	width:100%;
	clear:left;
}
And the HTML:

Code:
 <div class="FrameSmall">
    <div class="Float-L"><img alt="methane" src="../Images/methane.png" width="40%" class="imageEM" /></div>

    <p class="First6">where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p>
  </div>

  <div class="FrameSmall">
    <div class="Float-L"><img alt="ethane" src="../Images/ethane.png" class="imageEm" /></div>

    <p class="First6">Carbon can also share a single electron pair with another carbon atom, with hydrogen providing the remaining three available bonds. In such a case, the resulting compound is ethane (C<sub>2</sub>H<sub>6</sub>), which is depicted on the left.</p>
  </div>

  <p class="Main">Methane and ethane are but simple compounds commonly encountered in the discipline of which can be described as the study of chemical compounds of carbon other than a few very basic and simple compounds such as oxides, carbides and carbonates. Studies of the chemistry of life are an important part of organic chemistry, but do not comprise the whole field by any means, as there are many carbon compounds that are organic but play no role in the chemistry of life.</p>
And the results: see attached.

Michelle

P.S. The image alt= is just something that Sigil does automatically and it serves no harm so I leave it in.
Attached Thumbnails
Click image for larger version

Name:	ADE8.jpg
Views:	23
Size:	253.2 KB
ID:	106681  
eggheadbooks1 is offline   Reply With Quote
Old 06-05-2013, 07:21 PM   #28
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Just saw my small "em" in my class in the second example. Oops. Let me try again...

Meh, no difference.

Michelle
eggheadbooks1 is offline   Reply With Quote
Old 06-05-2013, 07:24 PM   #29
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Just realized one error: I made the image class a div class. Fixed that and getting closer but images are now skewed. Will work on it and report back.

Michelle
eggheadbooks1 is offline   Reply With Quote
Old 06-05-2013, 07:37 PM   #30
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Okay. We're almost there. I have lowered the margin value of the Float-L division from 15px to 10px and that has gotten rid of the large gap between image and text. The em value is now recognized by ADE (and I also tested in Aldiko, which I have side-loaded on my Fire). Only one small obstacle remains: distortion of the image ratio. I added width=auto into the CSS, and while that works at most image sizes, there is some distortion remaining. Perhaps I suck that one up. But is there a better code than "width=auto".

So now it looks like this and it is working, save for the above notations:

Code:
div.FrameSmall{
	width:100%;
	clear:left;
}
div.Float-L{
	float:left;
	margin: 0 10px;
	}
.imageEM{
	height:6em;
	width:auto;
	max-width:225px;
	min-width:110px;
}
and

Code:
<div class="FrameSmall">
    <div class="Float-L"><img alt="methane" src="../Images/methane.png" class="imageEM" /></div>

    <p class="First6">where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p>
  </div>
eggheadbooks1 is offline   Reply With Quote
Reply

Tags
epub, frames, text box

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Kindlet The operator >> is undefined for the argument type(s) float, float twobob Kindle Developer's Corner 10 09-05-2012 12:50 PM
Image overlayed over text (but text visible if image disabled)? Kaylee Skylyn ePub 5 08-01-2012 05:27 PM
Why is image left justified when I link to it? steve2112 Kindle Developer's Corner 4 03-23-2012 02:53 AM
Gold box sale on K3 (Keyboard) Covers (2h 20m left) Wasp Woman Amazon Kindle 0 12-01-2011 06:42 PM
Left-justified text in a right-justified box Skeezix Conversion 4 11-15-2011 08:44 PM


All times are GMT -4. The time now is 12:13 AM.


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