05-07-2013, 03:32 AM | #1 |
Junior Member
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> 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; } Last edited by BruceWDarby; 05-07-2013 at 08:47 AM. Reason: Edited to remove 'middle' from div float... |
05-07-2013, 03:41 AM | #2 |
A Hairy Wizard
Posts: 3,094
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Check the float tag. there is no option for "middle", only left, right, none, or inherit.
W3Schools Float reference |
05-07-2013, 04:21 AM | #3 | |
Junior Member
Posts: 7
Karma: 10
Join Date: Mar 2013
Device: Toshiba Thrive
|
Quote:
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... |
|
05-07-2013, 09:37 AM | #4 |
Junior Member
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.
|
05-07-2013, 09:44 AM | #5 |
A Hairy Wizard
Posts: 3,094
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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! |
05-07-2013, 11:00 AM | #6 | |
Well trained by Cats
Posts: 29,800
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
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. |
|
05-07-2013, 01:53 PM | #7 | |
Wizard
Posts: 2,082
Karma: 8796704
Join Date: Jun 2010
Device: Kobo Clara HD,Hisence Sero 7 Pro RIP, Nook STR, jetbook lite
|
Quote:
bernie |
|
05-07-2013, 09:36 PM | #8 |
Junior Member
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... |
05-08-2013, 06:35 AM | #9 |
Guru
Posts: 878
Karma: 2457540
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. |
05-08-2013, 07:11 AM | #10 |
Junior Member
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. |
05-08-2013, 07:24 AM | #11 |
Guru
Posts: 878
Karma: 2457540
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? |
05-08-2013, 10:03 AM | #12 |
Junior Member
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) |
05-08-2013, 10:14 AM | #13 | |
Well trained by Cats
Posts: 29,800
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
They are fine on the bigger screen. but render like dung on many smaller (low pixel width) screens. |
|
05-08-2013, 10:24 AM | #14 |
Junior Member
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. |
05-08-2013, 10:53 AM | #15 |
Color me gone
Posts: 2,089
Karma: 1445295
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. |
|
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 |