Wrapping Text Around Images

[cleocalliope]

The title more or less says it all. I've been trying to get text to wrap around the images. It works in the Sigil preview, but when I try to open the file in an epub reader, it doesn't work. What happens instead is that the image is inline with the first line of the text. The rest of the text is below the image. Help?


CSS:

div.img {
display: block;
}

img.left {
float: left;
display: block;
margin: 0 .7em .4em .3em;
}

XHTML:

<div class="img">
<img class="left" align="left" alt="Chemestry" src="../Images/hopesprings01.png"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper pulvinar odio, quis egestas sapien vestibulum quis. Vivamus pretium quis nisl vulputate pulvinar. Morbi et sodales neque, a consectetur sem. Aenean et tristique sapien. Cras a orci imperdiet, tincidunt mauris et, semper augue. Praesent gravida sem ut magna luctus fringilla. Duis quis lorem a nisl semper eleifend. Vestibulum eget nunc urna.<br /><br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper pulvinar odio, quis egestas sapien vestibulum quis. Vivamus pretium quis nisl vulputate pulvinar. Morbi et sodales neque, a consectetur sem. Aenean et tristique sapien. Cras a orci imperdiet, tincidunt mauris et, semper augue. Praesent gravida sem ut magna luctus fringilla. Duis quis lorem a nisl semper eleifend. Vestibulum eget nunc urna.
</div>

[phillipgessert]

Divs are already block level elements. Your div.img isn’t doing anything a regular <div> wouldn’t. I’d try wrapping your text in <p>s, and scrapping those <br/>s. That’s likely the actual reason for your problem. Your image isn’t floating around another element, because there isn’t another element. It’s just naked text in the div.

As a side note, both rules are probably overspecific. Your files will be more manageable if you use eg. .left instead of img.left unless you are using different styles for left-floated images vs any other left-floated elements.

[Turtle91]

Yup...what he said.

Try:

CSS:
div.imgleft {
float: left;
margin: 0 .7em .4em .3em;
}


XHTML:
<div class="imgleft"><img alt="Chemestry" src="../Images/hopesprings01.png"/></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper pulvinar odio, quis egestas sapien vestibulum quis. Vivamus pretium quis nisl vulputate pulvinar. Morbi et sodales neque, a consectetur sem. Aenean et tristique sapien. Cras a orci imperdiet, tincidunt mauris et, semper augue. Praesent gravida sem ut magna luctus fringilla. Duis quis lorem a nisl semper eleifend. Vestibulum eget nunc urna.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper pulvinar odio, quis egestas sapien vestibulum quis. Vivamus pretium quis nisl vulputate pulvinar. Morbi et sodales neque, a consectetur sem. Aenean et tristique sapien. Cras a orci imperdiet, tincidunt mauris et, semper augue. Praesent gravida sem ut magna luctus fringilla. Duis quis lorem a nisl semper eleifend. Vestibulum eget nunc urna.</p>

[cleocalliope]

[QUOTE=phillipgessert;4217562our files will be more manageable if you use eg. .left instead of img.left unless you are using different styles for left-floated images vs any other left-floated elements.[/QUOTE]

I have no idea what you're talking about. What's eg? I don't remember a CSS code called eg.

I had the paragraphs done with <p> but tried using the <br /> on the advice of a CSS website.

[cleocalliope]

I just tried the code, but it didn't work. The image is no longer inline with the first sentence of the paragraph. It's just centered above it. I'm just not sure how that CSS centered the image.

[Turtle91]

eg stands for the Latin phrase exempli gratia, meaning “for example.”

Based on the little bit of code you gave here, the code provided above will work. however if you have other styling saying differently, then it may take precedence...e.g.

p {clear:both}

we won't know unless we can see more of your CSS sheet and the area around what you are trying to affect.

The only other thing I can think of is your reader doesn't follow the styling that is included with the ePub...it uses it's own built-in styling. What reader are you testing on, and does it have a "use publisher styling" option, or somesuch?

[JSWolf]

@Turtle91, do you have CSS code for irregular shaped images and not rectangular or square?

[DNSB]

Originally Posted by JSWolf

do you have CSS code for irregular shaped images and not rectangular or square?

Please! Not that can of worms again. I remember several discussions as far back as 2013 and none of them worked across multiple platforms reliably. AFAIR, the discussion I am remembering from 2014 was related to an L shaped image and even there cross-platform was a PITA. I even seem to remember one JSWolf participating in those discussions. One of the best solutions was (if I am remembering correctly) was on Liz Castro's Pigs, Gourds and Wikis and even that was only reliable on the then version of iBooks.

[phillipgessert]

Originally Posted by cleocalliope

I have no idea what you're talking about. What's eg? I don't remember a CSS code called eg.

I had the paragraphs done with <p> but tried using the <br /> on the advice of a CSS website.

Sorry. I can see how that was confusing. Please ignore my entire side note. I would recommend taking some time to learn a little more about HTML and CSS. Jon Duckett wrote a very accessible and understandable book about their relationship. And I would also recommend avoiding most online advice about using <br/>. It is a very useful tag but is often abused. It seems unsuitable here.

[theducks]

Originally Posted by JSWolf

@Turtle91, do you have CSS code for irregular shaped images and not rectangular or square?

Almost a decade ago, someone posted a series of examples here at MR:
parrot.epub
They slice the image when the shape changes

[DNSB]

Perhaps take a look at the epub code snippets (html / css) thread.

[Turtle91]

Originally Posted by JSWolf

@Turtle91, do you have CSS code for irregular shaped images and not rectangular or square?

I seem to remember the same discussion from awhile ago. But, no, I haven’t found the need, yet, for irregularly shaped images.

[Notjohn]

>eg stands for the Latin phrase exempli gratia, meaning “for example.”

It was a tragedy when Latin ceased to be a part of the college-prep curriculum. Not that the STUDENTS lost the language, but that future teachers did.

[Turtle91]

Amen!

I hear these complaints all the time from my HS Latin teacher wife!!

[cleocalliope]

Originally Posted by Turtle91

we won't know unless we can see more of your CSS sheet and the area around what you are trying to affect.

Sorry about the delay in getting back to you. RL.

Here's my full CSS:

Spoiler:

.storybody {
margin-top: 0;
display: block;
font-size: .9em;
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
margin-left: 10pt;
margin-right: 10pt;
text-align: justify;
font-family: Georgia, serif;
}

p {
margin-left: 0;
display: block;
margin-right: 0;
margin-bottom: .8em;
text-align: justify;
font-family: Georgia, serif;
}

a {
color: #a60000;
text-decoration: none;
}

p.title {
margin: auto;
font-size: 1.8em;
margin-bottom: 8px;
text-align: center;
letter-spacing: 1.5px;
font-variant: small-caps;
font-family: Georgia, serif;
}

p.subtitle {
margin: auto;
font-size: 1.1em;
margin-bottom: 8px;
text-align: center;
letter-spacing: 1.5px;
font-family: Georgia, serif;
}

p.dtitle1 {
margin: auto;
font-size: 1.6em;
text-align: center;
letter-spacing: 1.5px;
font-variant: small-caps;
font-family: Georgia, serif;
}

p.dtitle2 {
margin: auto;
font-size: 1.3em;
width: 70%;
margin-bottom: 25px;
text-align: center;
letter-spacing: 1.5px;
font-variant: small-caps;
font-family: Georgia, serif;
}

p.indent {
display: block;
margin-right: 0;
margin-left: 2em;
margin-bottom: .8em;
text-align: justify;
font-family: Georgia, serif;
}

p.section {
font-size: 1.2em;
margin-bottom: 8px;
text-align: center;
letter-spacing: 1.3px;
font-variant: small-caps;
text-decoration: underline;
font-family: Georgia, serif;
}


p.italics {
display: block;
font-style: italic;
font-family: Georgia, serif;
}

a {
color: black;
}


img.center {
display: block;
margin-top: 1em;
margin-bottom 1em;
text-align: center;
margin-left: auto;
margin-right: auto;
}


div.imgleft {
float: left;
margin: 0 .7em .4em .3em;
}


div.imgright {
float: right;
margin: 0 0.7em 0 0.7em;
}

.imgborder {
padding: 1px;
border: 2.3px solid black;
}

.spacebottom {
margin-bottom: 2em;
}

.spacetop {
margin-top: 2em;
}