MobileRead Forums - CSS to keep images left (and not nesting)

MobileRead Forums (https://www.mobileread.com/forums/index.php)

- ePub (https://www.mobileread.com/forums/forumdisplay.php?f=179)

- - CSS to keep images left (and not nesting) (https://www.mobileread.com/forums/showthread.php?t=296462)

handycrowd

04-23-2018 04:00 PM

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;

}

See screenshots below for examples...
This is what I don't want....
https://handycrowd.com/wp-content/up...enshot-365.jpg
I want it to look like this, even for the images with only a line or two of text...
https://handycrowd.com/wp-content/up...enshot-366.jpg

Ta muchly to anyone who can spare me a minute :-)
Cheers
Ian

Tex2002ans

04-23-2018 10:03 PM

You may want to add clear to your img.check CSS:

Code:

clear: both

or:

Code:

clear: left

You can read more about clear on W3C's site:

https://www.w3schools.com/cssref/pr_class_clear.asp

or on Mozilla's site:

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

handycrowd

04-24-2018 02:28 AM

Quote:

Originally Posted by Tex2002ans (Post 3686064)

Code:

clear: both

or:

Code:

clear: left

Thanks Tex :thumbsup:
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.

https://handycrowd.com/wp-content/up...lipboard01.jpg

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!

doubleshuffle

04-24-2018 03:27 AM

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.

handycrowd

04-24-2018 08:24 AM

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...

doubleshuffle

04-24-2018 08:36 AM

Now I'm interested: How exactly would you pad out the text?

KevinH

04-24-2018 11:20 AM

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.

handycrowd

04-24-2018 11:22 AM

adding space to text

Quote:

Originally Posted by doubleshuffle (Post 3686190)

How exactly would you pad out the 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:

p.5emspacebelow {
text-align:center;
margin: 1em 0 5em 0;
}

Seemed to work!

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...

handycrowd

04-24-2018 11:23 AM

Quote:

Originally Posted by KevinH (Post 3686250)

All done.

Tex2002ans

04-24-2018 02:05 PM

1 Attachment(s)

Quote:

Originally Posted by handycrowd (Post 3686251)

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...

You could create a Clip using Tools > Clip Editor.

Code:

<div class="clear">\1</div>

and give it a name (like "Div Clear").

Then make sure you can see your Clips bar: View > Clips. I drag mine in the lower left corner:

Attachment 163631

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>

turns into this:

Code:

<div class="clear"><p><img src="TestImage"/> This is a sentence.</p></div>

All times are GMT -4. The time now is 05:37 PM.