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 05-07-2013, 03:32 AM   #1
BruceWDarby
Junior Member
BruceWDarby began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Mar 2013
Device: Toshiba Thrive
Placing div's side by side

Hi there ladies and gents,

Have been doing a bit of work trying to learn how to create an ebook. Using a .pdf of one of my Dummies books and trying to make it look as close to the original as I can. Have searched far and wide to find an answer to this particular issue I'm having in trying to place the caption text in a div next to the actual graphic that the caption is for. Below is my html code...

Code:
<div>
    <div class="figuretext"><span style="font-family: 'Arial Bold'">Figure 1-1</span>: CSS files can be managed within Microsoft’s Visual Studio.
    </div>

    <div class="graphicbox">
      <p><img alt="" src="../Images/Figure01-01.png" /></p>
    </div>
    <div style="clear: both"></div>
  </div>
And this is the CSS code...

Code:
.graphicbox {
	float: right;
	margin-left: 13%;
	margin-top: 0em;
	border: 1px solid black;
	}
.figuretext {
	float: left;
	font-family: 'Arial Regular';
	font-size: .75em;	
	text-align: right;
	border: 1px solid black;
	margin-right: 88%;
	margin-top: 4em;
	}
From all the research I've done on this subject, the two div's should be happily coexisting side by side. The problem is they are not. I have floated a graphic to the left of a paragraph of text without issue, but as you can see from the temporary borders I have placed around the div's, the code is 'trying' to do the right thing, but somehow cannot. Anyone have a solution?
Attached Thumbnails
Click image for larger version

Name:	FloatError.PNG
Views:	90
Size:	44.4 KB
ID:	105506  

Last edited by BruceWDarby; 05-07-2013 at 08:47 AM. Reason: Edited to remove 'middle' from div float...
BruceWDarby is offline   Reply With Quote
Old 05-07-2013, 03:41 AM   #2
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
Check the float tag. there is no option for "middle", only left, right, none, or inherit.

W3Schools Float reference
Turtle91 is offline   Reply With Quote
 
Enthusiast
Old 05-07-2013, 04:21 AM   #3
BruceWDarby
Junior Member
BruceWDarby began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Mar 2013
Device: Toshiba Thrive
Quote:
Originally Posted by Turtle91 View Post
Check the float tag. there is no option for "middle", only left, right, none, or inherit.

W3Schools Float reference
Turtle,

Thanks for that. Was kinda wondering, but did find that reference on one of the CSS sites I visited and thought I'd give it a try. If my graphic is resized down to where it will only fill one-third of its div and floated to the right, the two div's are raised to the same level, but if I increase the size of the graphic to anything over 50% of the div, it drops under the div containing the caption. The same is true if I place the graphic above the caption in the html code. It acts as if the right margin for .figuretext is being ignored by Sigil and the graphic is being forced down as a result.

Thanks for the assist...
BruceWDarby is offline   Reply With Quote
Old 05-07-2013, 09:37 AM   #4
BruceWDarby
Junior Member
BruceWDarby began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Mar 2013
Device: Toshiba Thrive
Found the answer. 'Twas the margins in the CSS class's. For some strange reason, Turtle, even though middle is not supported, it does work. Thanks for helping me over the hump.
BruceWDarby is offline   Reply With Quote
Old 05-07-2013, 09:44 AM   #5
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'm glad you got it working!

I would check to make sure your ePub validates properly. If you have invalid CSS it might display properly in Sigil, but could totally barf on a different display like ADE.

Cheers!
Turtle91 is offline   Reply With Quote
Old 05-07-2013, 11:00 AM   #6
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 14,903
Karma: 5880479
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by BruceWDarby View Post
Found the answer. 'Twas the margins in the CSS class's. For some strange reason, Turtle, even though middle is not supported, it does work. Thanks for helping me over the hump.
Do not Depend on something that appears to work in Sigil
Sigil will tolerate more errors (IMHO allowing any non-spec feature is an error) than the Spec allows.

Then you still need to check your work on Devices because DEVICES do not always support all of the EPUB SPEC.

to wit a 50% <hr /> appears as intended in Sigil/ To get it to appear the same with ADE (MRSDK), you need to fake the center by using a margin-left: 25%

Do spend some time reading the stickies at the top of formats forums. It will save a lot of hair pulling/ later.
theducks is offline   Reply With Quote
Old 05-07-2013, 01:53 PM   #7
gbm
Guru
gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.
 
Posts: 697
Karma: 1332996
Join Date: Jun 2010
Device: Hisence Sero 7 Pro, Nook STR, jetbook lite
Quote:
Originally Posted by theducks View Post
Do not Depend on something that appears to work in Sigil
Sigil will tolerate more errors (IMHO allowing any non-spec feature is an error) than the Spec allows.

Then you still need to check your work on Devices because DEVICES do not always support all of the EPUB SPEC.

to wit a 50% <hr /> appears as intended in Sigil/ To get it to appear the same with ADE (MRSDK), you need to fake the center by using a margin-left: 25%

Do spend some time reading the stickies at the top of formats forums. It will save a lot of hair pulling/ later.
I would start with the Known bugs in ADE

bernie
gbm is offline   Reply With Quote
Old 05-07-2013, 09:36 PM   #8
BruceWDarby
Junior Member
BruceWDarby began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Mar 2013
Device: Toshiba Thrive
If ever I take it upon myself to publish an ebook, I shall very seriously research all area's of this site and any other site that can provide me an inkling of knowledge needed to accomplish said task. For the time being, I am simply trying to convert my technical books to electronic format for my Toshiba Thrive tablet. The learning process is not difficult, but it is complex in knowing what I can or cannot do because certain new technologies are not yet implemented in Sigil or Aldiko or Calibre. Standardization is what is ultimately going to bring me to a point where I would feel the ability to create a work of my own would be worthwhile. But with your gracious help and forbearance, I am happy to be a lurking member, for now.

Last edited by BruceWDarby; 05-07-2013 at 10:03 PM. Reason: spellcheck....spellcheck...spellcheck...
BruceWDarby is offline   Reply With Quote
Old 05-08-2013, 06:35 AM   #9
exaltedwombat
Evangelist
exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.
 
Posts: 446
Karma: 1703930
Join Date: Nov 2011
Device: none
If you ever write a book, I hope you never publish a sentence quite as horribly convoluted as the one below:
"If ever I take it upon myself to publish an ebook, I shall very seriously research all area's of this site and any other site that can provide me an inkling of knowledge needed to accomplish said task." :-)

Your Toshiba Thrive is a 10" device I think? This is big enough to read PDFs of full book pages. You might find this a better approach. Epub is great for reading narrative text. It sucks when layout, tabular data etc. need to be retained.
exaltedwombat is offline   Reply With Quote
Old 05-08-2013, 07:11 AM   #10
BruceWDarby
Junior Member
BruceWDarby began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Mar 2013
Device: Toshiba Thrive
*sigh* the whole world is a critic! There is no room for eloquence in the world any longer.

Yes, the Thrive is a 10" device, and I even have Adobe Reader on it, but the fun is in not using the de facto 'standard', but in learning new things. I have run into a few walls, but while I am sometimes anal, I can be flexible about my page layout. The fun is in watching the industry grow. As it does so, then items that are currently not considered important will become so and the tools will change to reflect it.
BruceWDarby is offline   Reply With Quote
Old 05-08-2013, 07:24 AM   #11
exaltedwombat
Evangelist
exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.
 
Posts: 446
Karma: 1703930
Join Date: Nov 2011
Device: none
At the present state of play, the tool for displaying what you want to display, on your device, is PDF.

The silly thing is - the devices people use to read eBooks generally also support a web browser. They can display a page using a much fuller set of HTML and css instructions than epub allows. There's an enormous amount of existing expertise in website design, both liquid and fixed-width formats. Is there ANY excuse for epub and mobi other than DRM?
exaltedwombat is offline   Reply With Quote
Old 05-08-2013, 10:03 AM   #12
BrisChri
Junior Member
BrisChri began at the beginning.
 
BrisChri's Avatar
 
Posts: 6
Karma: 10
Join Date: May 2013
Location: Brussels, Belgium
Device: Arnova 10
An idea I never tried on ePub's: use "display:table;" in place of "float:left/right;".

An explanation can be find here : http://www.onenaught.com/posts/201/u...ble-for-layout (2009).
Compatibility with browser : http://caniuse.com/css-table
I use the "display:table;" here http://brischri.angelfire.com/bibi.html
- footer : "A propos", "Liens utiles" and "Oh!Bises" are displayed in table.
- That's a copy of another site which explain the capacities of html5 (I can't retrieve the original in english, sorry)
BrisChri is offline   Reply With Quote
Old 05-08-2013, 10:14 AM   #13
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 14,903
Karma: 5880479
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by BrisChri View Post
An idea I never tried on ePub's: use "display:table;" in place of "float:left/right;".

An explanation can be find here : http://www.onenaught.com/posts/201/u...ble-for-layout (2009).
Compatibility with browser : http://caniuse.com/css-table
I use the "display:table;" here http://brischri.angelfire.com/bibi.html
- footer : "A propos", "Liens utiles" and "Oh!Bises" are displayed in table.
- That's a copy of another site which explain the capacities of html5 (I can't retrieve the original in english, sorry)
IMHO Tables are almost as bad as PDF.
They are fine on the bigger screen. but render like dung on many smaller (low pixel width) screens.
theducks is offline   Reply With Quote
Old 05-08-2013, 10:24 AM   #14
BrisChri
Junior Member
BrisChri began at the beginning.
 
BrisChri's Avatar
 
Posts: 6
Karma: 10
Join Date: May 2013
Location: Brussels, Belgium
Device: Arnova 10
I agree, on a 10" device and for personnal use (and personnal interest to study and trying), that must be usable.
For professionnal use and distribution, I think that's a bad idea.
BrisChri is offline   Reply With Quote
Old 05-08-2013, 10:53 AM   #15
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: 2,086
Karma: 1444487
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
And tables are NOT rotate-able to take advantage of the longer dimension of the page either. If you have to use an image in order for a table to work, you might as well be using a PDF if the device is big enough. Since I have a PRS-300, images are how I go.

Columns, pull quotes and inset special articles are great too, but not on my small device. If you're making them for yourself, you might as well make them as good as your device allows.

I think there might be another section in the MR library for larger format books that can take advantage of greater size in tablets and the like. But that may be subsumed by the PDF section, since it is dead easy to make a PDF from any document.
mrmikel 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
Kobo Android app - Switch from single to side-by-side view akuerz75 Kobo Reader 58 11-22-2011 05:29 AM
Kindle DX, PRS-505, nook, and paper - side-by-side TevK Which one should I buy? 7 12-23-2009 12:50 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


All times are GMT -4. The time now is 07:40 AM.


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