Text to right of graphics

This forum is for all Flare issues related to PDF, eBook, Microsoft Word, Adobe FrameMaker, XPS, and XHTML book targets.
Post Reply
Isleofgough
Propeller Head
Posts: 91
Joined: Sat Dec 08, 2012 9:05 am
Location: Seattle WA

Text to right of graphics

Post by Isleofgough »

I am redoing a book I wrote, but this time I need to have a paragraph tag to put text to the right of certain graphics. I tried creating an img.Float for the graphic and a separate p.Float for text. Unfortunately it is not working. Can you direct me to a good solution to have text beside graphics (without using a table)? Thanks.

Here is the text, result, and style sheet settings. The second line of text should be below the first to the left of the image, but it is not.
FlareTextCode.jpg
FlareTest.jpg
flareStyle.jpg
You do not have the required permissions to view the files attached to this post.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Text to right of graphics

Post by ChoccieMuffin »

Firstly, I would put the image in its own paragraph, for example p.image, and add the following to your stylesheet:

Code: Select all

p.image 
{ 
float: left; 
} 
p.clear 
{ 
clear: both; 
}
Format the paragraph containing the image as p.image and the first paragraph after the image as p.clear.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Isleofgough
Propeller Head
Posts: 91
Joined: Sat Dec 08, 2012 9:05 am
Location: Seattle WA

Re: Text to right of graphics

Post by Isleofgough »

Thank you. I’ll try that when I get back from a trip. The code should be helpful.
Isleofgough
Propeller Head
Posts: 91
Joined: Sat Dec 08, 2012 9:05 am
Location: Seattle WA

Re: Text to right of graphics

Post by Isleofgough »

I'm still not getting multiple lines to left of graphic. Only the first line works. What am I doing wrong:

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:onlyLocalStylesheets="True" class="topic" style="mc-master-page: url('..\Resources\MasterPages\HomePage.flmsp');">
<head>
<link href="../Resources/Stylesheets/CSS8x10.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Test Topic</h1>
<p class="image">
<img src="../Resources/Images/RedX.png" MadCap:mediastyle="@media print { width: 50%;max-width: 50%; }" class="left" />Testing for text to left of image. This is more text as well. All this is to the left of the image.</p>
<p Class="image"> This is second line</p>
<p class="image"> Third line of text.</p>
<p class="imgclear">
This is supposed to be first line of text below image
</p>
</body>
</html>
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Text to right of graphics

Post by Nita Beck »

You haven't quite followed Choccie's advice.

Put the image in a paragraph all by itself. Apply the p.image style to that paragraph.

For the first paragraph that you want to show up BELOW the image, apply the p.clear style to it. That will force it come below the image.

The paragraphs that are BETWEEN the image paragraph and the clear paragraph can just be plain old p's. They will appear beside the floated image.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Text to right of graphics

Post by ChoccieMuffin »

Almost there, but a couple of things not quite right, so try this.

I'm assuming you've added the classes p.image and p.imgclear to your CSS8x10.css stylesheet. If not, then it's not going to work!

The image needs to be inside its own paragraph, with nothing else in it (no text). That paragraph needs to be styled as p.image. (Just the paragraph, not the image.)

The paragraphs that you want to be on the right of the image don't need any extra styling, just common or garden <p>.

The first paragraph that you want to be under the image needs to be styled as p.imgclear (assuming that's what you've called it in your stylesheet).

I've tried this in my own project and it works, so fingers crossed this does the trick for you.

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:onlyLocalStylesheets="True" class="topic" style="mc-master-page: url('..\Resources\MasterPages\HomePage.flmsp');">
<head>
<link href="../Resources/Stylesheets/CSS8x10.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Test Topic</h1>
<p class="image">
<img src="../Resources/Images/RedX.png" MadCap:mediastyle="@media print { width: 50%;max-width: 50%; }" /></p>
<p>Testing for text to left of image. This is more text as well. All this is to the left of the image.</p>
<p> This is second line</p>
<p > Third line of text.</p>
<p class="imgclear">
This is supposed to be first line of text below image
</p>
</body>
</html>
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Isleofgough
Propeller Head
Posts: 91
Joined: Sat Dec 08, 2012 9:05 am
Location: Seattle WA

Re: Text to right of graphics

Post by Isleofgough »

Thank you again. I found the problem. My default p style had box clear set to "left". I changed it to default and everything is working better. However, I tried to move the styles over to my main style sheet, and the problem reoccurred. Since this appears to be a css issue, I have posted the question in the styles section of the forum. I added the issue of text to left of graphic as well. I don't want to specify a large right margin, as I need to create an epub version as well and want basically a text wrap to occur.
Post Reply