Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 05-08-2015, 03:12 PM   #1
xmlgirl
Enthusiast
xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.
 
Posts: 29
Karma: 496864
Join Date: Mar 2012
Location: Virginia
Device: none
floating multiple images

I have a group of 4 authors' photos that I want right floated at the top of their article. It looks fine, but just realized they are in reverse order. So I wrapped another div around the group and right floated it and left floated the others, but still getting reverse order.
Want: Auth1 Auth2 Auth3 Auth4
Getting: Auth4 Auth3 Auth2 Auth1
Ideas?
Thanks.

<div class="figgroup">
<div class="fig">
<img src="../Images/auth1.jpeg" />
<p class="caption">Author1</p>
</div>
<div class="fig">
<img src="../Images/auth2.jpeg" />
<p class="caption">Author2</p>
</div>
<div class="fig">
<img src="../Images/auth3.jpeg" />
<p class="caption">Author3</p>
</div>
<div class="fig">
<img src="../Images/auth4.jpeg" />
<p class="caption">Author4</p>
</div>
</div>

div.fig {
display: table;
float: right;
}
div.fig p {
display:table-caption;
caption-side:bottom;
}
div.figgroup fig {float:left;}
div.figgroup {float:right;}
xmlgirl is offline   Reply With Quote
Old 05-08-2015, 07:26 PM   #2
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,347
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
If you want them in order from left to right, wouldn't you want them to "float: left". That would put each image the farthest left it could go, and then everything else to it's right.

Code:
div.fig {
display: table;
float: left;
}
div.fig p {
display:table-caption;
caption-side:bottom;
}
Turtle91 is online now   Reply With Quote
Advert
Old 05-08-2015, 08:36 PM   #3
xmlgirl
Enthusiast
xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.
 
Posts: 29
Karma: 496864
Join Date: Mar 2012
Location: Virginia
Device: none
But I'm floating them on the right side

text text text text text photo1 photo2 photo3 photo4
text text text text text text text text text text text

so I'm floating the figs left and the div right
div.figgroup fig {float:left;}
div.figgroup {float:right;}
xmlgirl is offline   Reply With Quote
Old 05-08-2015, 08:46 PM   #4
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,347
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Quote:
Originally Posted by xmlgirl View Post
div.fig {
display: table;
float: right;
}
div.fig p {
display:table-caption;
caption-side:bottom;
}
div.figgroup fig {float:left;}
div.figgroup {float:right;}
Ahhh, I see what you want now. I think there is a conflict with your floats. (underlined above) div.fig is floating them right, while div.figgroup fig is floating left.

I assume it's a typo in your example, but just make sure div.figgroup fig is actually named as "div.figgroup div.fig"

I haven't tested that, but I hope it helps.
Turtle91 is online now   Reply With Quote
Old 05-13-2015, 11:47 AM   #5
xmlgirl
Enthusiast
xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.xmlgirl ought to be getting tired of karma fortunes by now.
 
Posts: 29
Karma: 496864
Join Date: Mar 2012
Location: Virginia
Device: none
Duh! Thanks. You know how when you've looked at something so long that you are just never going to see it? That was one of those. Works perfectly now.
Thank you!
xmlgirl is offline   Reply With Quote
Advert
Reply


Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Importing multiple images John123 Workshop 3 02-24-2013 10:14 AM
Resizing multiple images but only if larger than...? arash84 Workshop 5 08-21-2012 06:51 PM
Floating images in MOBI output for Kindle DerAmateur Recipes 1 01-16-2011 02:38 PM
Any Epub creators support floating images? richough3 ePub 3 08-23-2010 12:42 PM
Importing multiple images pedgarcia Sigil 5 10-28-2009 12:38 PM


All times are GMT -4. The time now is 06:48 PM.


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