Side by side images - argh.

LostSock · 07-20-2011, 03:20 PM

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>

mrmikel · 07-21-2011, 07:00 AM

Why not just use your graphics program to make the two images one image?

LostSock · 07-21-2011, 09:00 AM

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;
}

mrmikel · 07-21-2011, 09:50 AM

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.

LostSock · 07-21-2011, 11:19 AM

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.

crutledge · 07-21-2011, 01:06 PM

Quote:

Originally Posted by mrmikel

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.

Kindle wiil only center images. I get around multiple images side by side by putting two images side by side in a composite. Gimp can do this very easiuly.

Hitch · 07-21-2011, 06:19 PM

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

LostSock · 07-22-2011, 10:21 AM

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.

07-20-2011, 03:20 PM	#1
LostSock 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, 09:00 AM	#3
LostSock 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; } Attached Thumbnails

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

07-21-2011, 07:00 AM	#2
mrmikel 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?

07-21-2011, 09:50 AM	#4
mrmikel 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
LostSock 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.

07-21-2011, 06:19 PM	#7
Hitch Bookmaker & Cat Slave Posts: 11,460 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
LostSock 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.

Advert

Advert