Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 04-23-2018, 03:00 PM   #1
handycrowd
Member
handycrowd began at the beginning.
 
handycrowd's Avatar
 
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;
}
See screenshots below for examples...
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
handycrowd is offline   Reply With Quote
Old 04-23-2018, 09:03 PM   #2
Tex2002ans
Wizard
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
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
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
Tex2002ans is offline   Reply With Quote
Old 04-24-2018, 01:28 AM   #3
handycrowd
Member
handycrowd began at the beginning.
 
handycrowd's Avatar
 
Posts: 14
Karma: 10
Join Date: May 2017
Location: Near the beach in Asker, Norway
Device: kindle 10gen
Quote:
Originally Posted by Tex2002ans View Post
Code:
clear: both
or:
Code:
clear: left
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!
handycrowd is offline   Reply With Quote
Old 04-24-2018, 02:27 AM   #4
doubleshuffle
Unicycle Daredevil
doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.
 
doubleshuffle's Avatar
 
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:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
img {float: left;}
div.clear {clear:both}
</style>
</head>

<body>
<h1>The clear Property</h1>

<div class="clear">
<img src="w3css.gif" width="100" height="132">
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p></div>

<div class="clear">
<img src="w3css.gif" width="100" height="132">
<p>This is also some text.</p></div>

<div class="clear">
<img src="w3css.gif" width="100" height="132">
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p></div>

</body>
</html>


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.
doubleshuffle is offline   Reply With Quote
Old 04-24-2018, 07:24 AM   #5
handycrowd
Member
handycrowd began at the beginning.
 
handycrowd's Avatar
 
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...
handycrowd is offline   Reply With Quote
Old 04-24-2018, 07:36 AM   #6
doubleshuffle
Unicycle Daredevil
doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.
 
doubleshuffle's Avatar
 
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?
doubleshuffle is offline   Reply With Quote
Old 04-24-2018, 10:20 AM   #7
KevinH
Sigil Developer
KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.
 
Posts: 7,469
Karma: 5432724
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.
KevinH is offline   Reply With Quote
Old 04-24-2018, 10:22 AM   #8
handycrowd
Member
handycrowd began at the beginning.
 
handycrowd's Avatar
 
Posts: 14
Karma: 10
Join Date: May 2017
Location: Near the beach in Asker, Norway
Device: kindle 10gen
adding space to text

Quote:
Originally Posted by doubleshuffle View Post
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 is offline   Reply With Quote
Old 04-24-2018, 10:23 AM   #9
handycrowd
Member
handycrowd began at the beginning.
 
handycrowd's Avatar
 
Posts: 14
Karma: 10
Join Date: May 2017
Location: Near the beach in Asker, Norway
Device: kindle 10gen
Quote:
Originally Posted by KevinH View Post
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.
All done.
handycrowd is offline   Reply With Quote
Old 04-24-2018, 01:05 PM   #10
Tex2002ans
Wizard
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
Quote:
Originally Posted by handycrowd View Post
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:

Click image for larger version

Name:	SigilClipsBar.png
Views:	260
Size:	24.8 KB
ID:	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>
Tex2002ans is offline   Reply With Quote
Reply

Tags
css, float left, images

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 01:45 AM.


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