Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 07-20-2011, 03:20 PM   #1
LostSock
Enthusiast
LostSock began at the beginning.
 
Posts: 26
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>
LostSock is offline   Reply With Quote
Old 07-21-2011, 07:00 AM   #2
mrmikel
Book Twiddler
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 1,687
Karma: 1356793
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?
mrmikel is offline   Reply With Quote
Old 07-21-2011, 09:00 AM   #3
LostSock
Enthusiast
LostSock began at the beginning.
 
Posts: 26
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
Click image for larger version

Name:	imageexample.jpg
Views:	55
Size:	72.8 KB
ID:	74645  
LostSock is offline   Reply With Quote
Old 07-21-2011, 09:50 AM   #4
mrmikel
Book Twiddler
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 1,687
Karma: 1356793
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.
mrmikel is offline   Reply With Quote
Old 07-21-2011, 11:19 AM   #5
LostSock
Enthusiast
LostSock began at the beginning.
 
Posts: 26
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.
LostSock is offline   Reply With Quote
Old 07-21-2011, 01:06 PM   #6
crutledge
eBook FANatic
crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.
 
crutledge's Avatar
 
Posts: 14,158
Karma: 13282342
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
Quote:
Originally Posted by mrmikel View Post
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.
crutledge is offline   Reply With Quote
Old 07-21-2011, 06:19 PM   #7
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 2,003
Karma: 10381859
Join Date: Apr 2010
Location: Phoenix, AZ
Device: Kindle2, iPad, KindleFire and NookColor
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
Hitch is offline   Reply With Quote
Old 07-22-2011, 10:21 AM   #8
LostSock
Enthusiast
LostSock began at the beginning.
 
Posts: 26
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.
LostSock is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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 Yusuf Ali, Abdullah: Al-Qur'an (The Koran, Three Translations Side by Side). 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


All times are GMT -4. The time now is 04:35 AM.


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