04-23-2018, 03:00 PM | #1 |
Member
Posts: 14
Karma: 10
Join Date: May 2017
Location: Near the beach in Asker, Norway
Device: kindle 10gen
|
CSS to keep images left (and not nesting)
Anyone know the CSS to keep images to the left? I've got some small images which I'm using as a kind of bullet with text to the right. Problem is when there isn't enough text to push the next image over to the left. Then they nest properly, but it's not what I want.
This is the css I'm using.... Code:
img.check { float:left; padding:.5em; width: auto; height: auto; display: block; } This is what I don't want.... I want it to look like this, even for the images with only a line or two of text... Ta muchly to anyone who can spare me a minute :-) Cheers Ian |
04-23-2018, 09:03 PM | #2 |
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
You may want to add clear to your img.check CSS:
Code:
clear: both Code:
clear: left https://www.w3schools.com/cssref/pr_class_clear.asp or on Mozilla's site: https://developer.mozilla.org/en-US/docs/Web/CSS/clear |
Advert | |
|
04-24-2018, 01:28 AM | #3 |
Member
Posts: 14
Karma: 10
Join Date: May 2017
Location: Near the beach in Asker, Norway
Device: kindle 10gen
|
Thanks Tex
Good to know, I had a play and it works perfectly with the images, stacking them on top of each other. But unfortunately each image doesn't keep the text alongside. I'm wondering if I should just find each image which has little text and add some padding to the bottom! Clumsy but it might be the easiest. Cheers! |
04-24-2018, 02:27 AM | #4 |
Unicycle Daredevil
Posts: 13,923
Karma: 185041098
Join Date: Jan 2011
Location: Planet of the Pudding Brains
Device: Aura HD (R.I.P. After six years the USB socket died.) tolino shine 3
|
It might work if you put image and the text that goes with it in a <div class="clear"> together. I just tried the following code on the W3C site, and there it does what you want it to do:
Spoiler:
Just put the code in the test window on the left here: https://www.w3schools.com/cssref/try...ss_class-clear and hit the green "Run" button. Last edited by doubleshuffle; 04-24-2018 at 02:50 AM. |
04-24-2018, 07:24 AM | #5 |
Member
Posts: 14
Karma: 10
Join Date: May 2017
Location: Near the beach in Asker, Norway
Device: kindle 10gen
|
Yes DS,
I figured doing that might work also as it would create a series of blocks like lines on a page I guess. On balance though, there are not many of the images which have short descriptions so I might just go back and 'pad out' the text lol! Thanks again for making the time... |
Advert | |
|
04-24-2018, 07:36 AM | #6 |
Unicycle Daredevil
Posts: 13,923
Karma: 185041098
Join Date: Jan 2011
Location: Planet of the Pudding Brains
Device: Aura HD (R.I.P. After six years the USB socket died.) tolino shine 3
|
Now I'm interested: How exactly would you pad out the text?
|
04-24-2018, 10:20 AM | #7 |
Sigil Developer
Posts: 7,630
Karma: 5433388
Join Date: Nov 2009
Device: many
|
FYI: This is a generic epub topic and has nothing to do with Sigil itself. Therefore, this discussion would be better located in the "epub" forum. Please continue any further discussion on this topic in that forum.
|
04-24-2018, 10:22 AM | #8 | |
Member
Posts: 14
Karma: 10
Join Date: May 2017
Location: Near the beach in Asker, Norway
Device: kindle 10gen
|
adding space to text
I've added space around text before before by adding a p class. I use this on my title page for example to space out titles and subs etc.
Quote:
This time though I'm following your idea! I'm wrapping each <p> within <div> tags and that separates everything brilliantly. Bit time consuming but once you get into a rhythm... Bear in mind I know next to nothing about HTML and CSS, only what I bumble though trying to put together ebooks... |
|
04-24-2018, 10:23 AM | #9 |
Member
Posts: 14
Karma: 10
Join Date: May 2017
Location: Near the beach in Asker, Norway
Device: kindle 10gen
|
|
04-24-2018, 01:05 PM | #10 | |
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
Code:
<div class="clear">\1</div> Then make sure you can see your Clips bar: View > Clips. I drag mine in the lower left corner: now when you highlight text, you can press on the "Div Clear" clip, and it will wrap the div around it. So this: Code:
<p><img src="TestImage"/> This is a sentence.</p> Code:
<div class="clear"><p><img src="TestImage"/> This is a sentence.</p></div> |
|
Tags |
css, float left, images |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
CSS: Content left and right - in same line | chaot | ePub | 12 | 01-11-2017 03:24 PM |
Images are left justified after conversion - what am I doing wrong? | Shazzyloulou | Conversion | 2 | 09-24-2015 05:25 PM |
Combining Class IDs In CSS to Control Left-Indent | SeaCanary | Sigil | 13 | 02-24-2014 01:58 PM |
Bug converting html css text-indent and left-margin | bhoyt | Conversion | 15 | 01-24-2014 07:28 PM |
How can I make a left-justify CSS for CoolReader? | Sunspark | Astak EZReader | 1 | 06-07-2010 11:00 AM |