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.
Text to right of graphics
-
- Propeller Head
- Posts: 91
- Joined: Sat Dec 08, 2012 9:05 am
- Location: Seattle WA
Text to right of graphics
You do not have the required permissions to view the files attached to this post.
-
- Senior Propellus Maximus
- Posts: 2632
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Text to right of graphics
Firstly, I would put the image in its own paragraph, for example p.image, and add the following to your stylesheet:
Format the paragraph containing the image as p.image and the first paragraph after the image as p.clear.
Code: Select all
p.image
{
float: left;
}
p.clear
{
clear: both;
}
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
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
-
- Propeller Head
- Posts: 91
- Joined: Sat Dec 08, 2012 9:05 am
- Location: Seattle WA
Re: Text to right of graphics
Thank you. I’ll try that when I get back from a trip. The code should be helpful.
-
- Propeller Head
- Posts: 91
- Joined: Sat Dec 08, 2012 9:05 am
- Location: Seattle WA
Re: Text to right of graphics
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>
<?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>
-
- Senior Propellus Maximus
- Posts: 3669
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Text to right of graphics
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.
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
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Senior Propellus Maximus
- Posts: 2632
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Text to right of graphics
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>
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
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
-
- Propeller Head
- Posts: 91
- Joined: Sat Dec 08, 2012 9:05 am
- Location: Seattle WA
Re: Text to right of graphics
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.