01-09-2022, 05:08 AM | #1 |
mostly an observer
Posts: 1,515
Karma: 987654
Join Date: Dec 2012
Device: Kindle
|
br clear
At the end of a book, I am adding blurbs for three related books. They stack up nicely when viewed with the Sigil preview, but when I use the online previewer at the KDP platform, I get a rather different result when pages are shown. The first book shows splendidly, but the second and third get pushed into the next page with the result that one image is directly above the other on the left (40% width) while the text for the second image fills the righthand area, pushing the final text to occupy a space to itself beneath the images and the full width of the page.
On the web, I'd simply use br clear=all, but that of course fails epubcheck, and search as I can, I've found no way to make an equivalent declaration in a style. I've tried the usual suspects online but come away more confused than before. What am I missing? (I can of course simply omit the second and third images, which is what I'll do for the time being.) Thanks! |
01-09-2022, 10:01 AM | #2 | |
Wizard
Posts: 1,539
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
|
|
Advert | |
|
01-09-2022, 12:28 PM | #3 |
A Hairy Wizard
Posts: 3,093
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
|
clear:both ??
Code:
.blurb {clear:both; margin:1em} .blurb p {font-size:.8em; font-family:serif; text-indent:0; margin:0 0 .5em} .image {margin:0 .25em} .image img {width:25%; max-width:600px; float:left; padding:0 5px 0 0} <div class="blurb"> <div class="image"><img.../></div> <p>yadda</p> <p>yadda</p> <p>yadda</p> </div> <div class="blurb"> <div class="image"><img.../></div> <p>yadda</p> <p>yadda</p> <p>yadda</p> </div> <div class="blurb"> <div class="image"><img.../></div> <p>yadda</p> <p>yadda</p> <p>yadda</p> </div> Last edited by Turtle91; 01-09-2022 at 12:40 PM. |
01-23-2022, 08:49 PM | #4 | |
Guru
Posts: 668
Karma: 929286
Join Date: Apr 2014
Device: PW-3, iPad, Android phone
|
Quote:
I do this to keep a sequence of bio paragraphs with a portrait each separated: <div class="nobreak"> <p class="noindent"><img class="mug" src="../Images/01kadek.jpg" alt="01kadek"/> KADEK KRISHNA ADIDHARMA, translator of Nukila Amal, is an author, curator, translator and environmental engineer. He is an independent voice from Bali who writes on art and environmental issues through the lenses of culture, ecology and history.<br class="cb"/></p> </div> .nobreak {break-inside: avoid; display: inline-block;} br.cb {clear: both;} img.mug{width:25%;float:left;margin-right:1em;margin-bottom:0.5em;} The div is to try to stop pagebreaks in the middle. Doesn't always work in practice, some readers are pigheaded. Last edited by AlanHK; 01-23-2022 at 11:58 PM. |
|
02-04-2022, 06:08 AM | #5 |
mostly an observer
Posts: 1,515
Karma: 987654
Join Date: Dec 2012
Device: Kindle
|
Excellent, thanks!
|
Advert | |
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
How clear is the text | frankrec | Kobo Reader | 2 | 06-12-2019 12:40 AM |
How to clear cache? | odamizu | Kindle Developer's Corner | 8 | 04-11-2017 11:15 AM |
Did I clear out Best Buy ? | carpetmojo | Sony Reader | 8 | 11-13-2011 04:20 AM |
Way to Clear Library? | Lobonca | Calibre | 5 | 01-05-2010 04:24 PM |