07-20-2011, 03:20 PM | #1 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Jun 2011
Device: none
|
Side by side images - argh.
I am quite certain that I am finding the hardest way to do this as possible, but here goes.
I want to have two images side by side (or an image and a side bar) in my epub. The epub does not agree. I tried using a table, which worked quite well in Sigil, and then was completely stripped in Adobe DE. So now I'm attempting via nested divs, but from what I've tested so far, they're not scalable and will cut off with the wrong sized screen. Anyone have a better way? I've been trying to find epubs to check examples, but haven't lucked out yet. This is what I have so far, which ADE stacks instead of having them side by side. It's been a very frustrating day, to say the least. Thanks in advance for any help! Code:
<style type="text/css"> .outerDiv { border:none; width:500px; height:350px; position:relative; color:#000000; font-family:times; font-weight:normal; font-size:0.75em; text-align:center; } .nestedDivL { background-color:#FFFFF; width:249px; position:absolute; top:10px; left:10px; } .nestedDivR { background-color:#FFFFF; width:249px; position:absolute; top:10px; right:10px; } </style> </head> <body> <div class="outerDiv"> <div class="nestedDivL"> <img alt="family3" src="../Images/2museum.jpeg" /> <p>Headed to the museum.</p> </div> <div class="nestedDivR"> <img alt="family2" src="../Images/2park.jpeg" /> <p>Catch in the park.</p> </div> </div> </body> </html> |
07-21-2011, 07:00 AM | #2 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
Why not just use your graphics program to make the two images one image?
|
Advert | |
|
07-21-2011, 09:00 AM | #3 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Jun 2011
Device: none
|
Because.... that would be far too easy.
Dammit. Why do I complicate things. Thank you for the suggestion I'm still having an issue with my textboxes though, which don't seem to play nicely when beside a photo. Do you think it's because the width is set too wide? I have them set to 48% each, but I sometimes get run-in between photo and box of the main body text. Here's the example: The purple blob is the picture, the white space on top shouldn't be there, and the red box is a textbox. You can see in the text box that the left side is a bit heavier with text, it's run in from the below main paragraph. Here's the code for it: Code:
div.textboxright { float: right; width: 48%; border-color: #660000; border-style: solid; border-width: 2px; margin-left: 0.25em; padding: 0.5em; } div.imageleft { float: left; width: 48%; margin-left: auto; margin-right: auto; margin-top: 1.00em; margin-bottom: 1.00em; padding-right: 0.5em; padding-left: 0.5em; } |
07-21-2011, 09:50 AM | #4 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
You could put align="left" in the img statement, eliminating the divs altogether. That is deprecated but it does work in Sigil.
If you are developing for a particular device you need to test in a reader for that device. From what I have read, mobi does not support it. Since I am a Sony guy, I can't really say if it is true or if there is a way to work around it. And not all devices support everything the same way. You can not center a heading easily using styles in Sony. It shows ok in Sigil, but does not show that way in the reader. But the old fashioned <center> command does work. |
07-21-2011, 11:19 AM | #5 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Jun 2011
Device: none
|
The align tag still gave me odd spacing, but thanks for the suggestion. I was able to put it to use at the ends of paragraphs. I'm mostly testing with ADE, and an iPad.
The text boxes just don't seem to function properly beside a picture, so I've just moved them a bit so that there's no overlapping. I'll put that on my project list to figure out when I'm no longer swamped. |
Advert | |
|
07-21-2011, 01:06 PM | #6 | |
eBook FANatic
Posts: 18,301
Karma: 16071131
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
|
Quote:
|
|
07-21-2011, 06:19 PM | #7 |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Well, if you're testing on iPad, first a) check to be sure that you have tested it both with the full-justification "shipped-with" setting turned OFF, and with it on, and b) that you put !important after the width and the float declarations, because Apple sucks and ignores half of what you say vis-a-vis CSS. Lastly, I can't help but note that although you've set your widths in %, you've set your margins in ems and your border in px, which might--just might--add up to more than 100%? (n.b.--I didn't do the math, because I'm lazy, but it's a possibility).
HTH, Hitch |
07-22-2011, 10:21 AM | #8 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Jun 2011
Device: none
|
Hmm, I'll check that out, thanks Hitch! I'm not even sure why I went with three different measurements, though it's rather stupid to.
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Kindle DX, PRS-505, nook, and paper - side-by-side | TevK | Which one should I buy? | 7 | 12-23-2009 12:50 PM |
Side by Side Comparisons of 505, 600, and K2 screens | jswinden | Sony Reader | 61 | 11-01-2009 11:46 PM |
Spiritual Ali, A. Y. & Pickthall, M. & Shakir, M. H.: Al-Qur'an. V1.0. | Yaksha | BBeB/LRF Books | 2 | 08-24-2009 05:46 PM |
Side by Side screen comparison: 505 & 700 | holden1 | Sony Reader | 131 | 11-14-2008 10:57 PM |
How to read a PDF format with 2 pages side by side ? | henkvdg | iRex | 2 | 12-15-2006 05:38 AM |