Is there CSS for "Leave image where it is"??

[writer_sam]

Hello Flare-ettes!

Got a head scratcher here (for me anyways. It may be simple to you, but it is Friday afternoon after all!!).

In my single-source topics, I have 2 types of images:

1. Screenshots
2. Icons

When the topic is built as a print output, I need the screenshots in the centre of the line but leave the icons as part of the flow of the text, for example:

text text text text
SCREENSHOT
text text text text
text text ICON text text

I have created an img class for the centering of the screenshot image - job done! - but I cannot fathom for the life of me how to tell the CSS to leave the icon where it is. I tried "postion: fixed" but that was ignored at build time. Any ideas??

[ChoccieMuffin]

A slight modification might do the trick if I have understood what you want to do properly, in that you want the icon to just flow with the surrounding text, e.g. "To do this click ICON. That happens." rather than the icon sitting slap bang in the middle of the line.

1. Create an image class for your icons (if you haven't done already). You might want to apply a max-height attribute to this, so your paragraphs that include an icon don't get messed up.
2. Create a "screenshot" class of <p> and apply your centering to the <p> rather than to the image. (This means that the paragraph is centred within the body of the document, rather than centering the image within the paragraph. Might not make any difference, but then again it might...)
3. Include your stuff inside <p>s.

<p>text text text text</p>
<p class="screenshot><img>SCREENSHOT</img></p>
<p>text text text text</p>
<p>text text ICON text text</p>

How does that work for you?

[writer_sam]

Smashing! Thanks ChoccieMuffin!

It never occurred to me to use the <p> tags for the screenshot and leave the rest as is. Think I got hung up on the "use <img> for images and <p> for text" mantra