Implementing floated, right aligned, captioned images

[CrystalTC]

For the past year I've been familiarising myself part-time with Flare 9 on a personal project (I have used FrameMaker commercially for over 20 years, but have decide to phase it out for clients once I can guarantee that I have the confidence to meet all the requirements needed using Flare.) I have now reached the stage where I have been able to produce a complex multi-topic illustrated instructional book ready for publication in various deliverable formats with conditional cross links etc. However there is one thing that I thought would be simple to implement, but which caused me many day's trying unsuccessfully to achieve, always coming frustratingly near, but never managing to implement satisfactorily.
I use several floating right-aligned, 5.5cm width pictures with an editable (text) caption. The normal text para is wrapped to the left (something that was easily achieve in FM), but I cannot find a simple way to implement it in Flare/CSS.
I have no problem with all the larger, almost full width, centred pictures with a caption, implementing this with a single div containing the image and a caption text para. I intended to do the same with the right aligned and float text to the left, and as I experimented I did achieve what I wanted at one point on one of the mediums that I had set up, however when I switch to the normal "print" medium that is also used for one of the deliverables, the overall formatting is lost - usually no float or centre aligned. I have repeatedly changed and verified that the caption, picture and div styles are all independently set up in the style editor to match each other on the default, print and my-print mediums.
Currently I am working around the problem by introducing the caption in Capture, and using a simple float right picture, but this is not foolproof as the raw pictures are not of constant size and are scaled into the document by the image style. This also scales the text embedded by Capture which means the the font size of each picture caption has to be individually tailored by experiment to maintain uniformity.
I'm sure that there must be an easy solution using a div but I can't seem to hit on it - can anyone help by constructing a simple div, or whatever that will solve my problem, and also save what little hair I have left?

[MattyQ]

I'm sure that there must be an easy solution using a div but I can't seem to hit on it - can anyone help by constructing a simple div, or whatever that will solve my problem, and also save what little hair I have left?

EDIT: Not sure you can use it, since I created the project in 10, but here's the sample project with the output, if you want it: http://www.mattostapchuk.com/Floating-Div.zip

Your instincts are absolutely right - a div would be a quick, easy solution to create a floating image and caption.

In Flare, I think the simplest and most reusable method would be to create a class for your div element.

This is what it sounds like you have now, just a floating image:



So what you want to do is create a div. That div should contain the image, and a paragraph which has the caption you want. Then, in the XML Editor, you can right-click on the div tag on the left bar of the XML workspace, and, at the bottom of the menu, Select Style Class > Create Style Class. Name it whatever you want. Flare will automatically open the CSS editor. The only CSS property you need to set is Float (set it to Right, for this example). You end up with something like this:



You'll notice that the XML Editor starts to get a little grumpy. The arrow below indicates where I've actually inserted the div element, between two existing paragraphs:



You'll probably want to style your div. To do so, modify the CSS properties in the div class you created. Some small changes get you something cleaner, like:



But you'll see that the XML editor gets grumpier and grumpier. I'm doing this in 10, so the visual effect in the XML editor in 9 might be even more pronounced. Here's how it looks in 10:



Personally, I prefer doing all of my stylesheet changes in a text editor outside of Flare. You can quickly create a class just for the div element in your stylesheet by opening it and adding a "div.floatbox" (where "floatbox" is whatever you want to name your class) and styling it there. The CSS for the simple styled box box above is as follows:

Code: Select all

div.styledfloat /* Where styledfloat is whatever name you want */
{
	border-radius: 0.5em;
	border: solid 2px #000000; 
	box-shadow: 2px 2px 2px black;
	float: right;
	margin-bottom: 3px;
	margin-left: 6px;
	margin-top: 3px;
	padding: 5px;
	text-align: center;
}

And the final HTML looks like this, in the text editor:

Code: Select all

<div class="styledfloat">
    <p>
        <img src="Resources/Images/HappyBatman.png" style="height: auto;width: 200px;" />
    </p>
    <p>I am a happy batman.</p>
</div>

If you wanted to give a border just to the caption text, you could individually style the paragraph element inside the div, or nest another div inside that would contain the text.

[CrystalTC]

Thanks MattyQ
Looks just what I'm needing - I've got a div centre picture plus caption style working fine but haven't been able to successful make the float work. I'll drop your code in and play with it over the next few days and post back with the outcome.