Paragraph style with image (for tips, warnings)

[MC Hammer]

Hi everyone,
I have a CSS query more than striclty speaking a Flare question.

I am have set up some p styles to accomodate for special paragraph such as tips, warnings or notes.
These have a background colour and a background image (left-aligned) and some text left-padded.

I would like the background image to be positioned like in the screenshot below:

Special_paragraph.gif

I have been playing with the background-position values and using negative values but the background image does not "continue" outside of the box.

Cropped_bg_image.gif

Can this be done? Do I need to add some transparent padding to the box so that the positioning of the image is part of the box?
Thanks in advance.

[NorthEast]

You can't do that by setting negative values for the background image, as the image will be clipped inside its container.

I don't think there's an easy solution. If you look at the source HTML and CSS from that site, you'll see it requires a few tags to get that effect. You would use a container tag (e.g. a div) for the box. Inside that box you'd have a tag (e.g. paragraph) with the background image. To position that tag outside of its container box, you'd use the position: relative property, and set negative left and top values.

That's the basic idea, it'll need a bit of fiddling around in CSS to get it working though.

[MC Hammer]

Hi Dave
Thanks (again) for helping me out by giving me some hints on how this can be implemented
I shall give it a go.

[NorthEast]

Like I say, have a look at the site it came from (maybe use a tool like the Firebug add-on for Firefox).
I'm not sure what your CSS knowledge is like, but if you can follow the CSS on the site, then have a go. If you can't follow it, then you might be on this for a while!

[MC Hammer]

Hi Dave
Before this, I thought that my knowledge of CSS was not too bad but this is quite complex. I have had a look at the source code but without more details on the div or p classes' attributes, I think you are right in that I will be on this for a while .
I have managed to get the coloured container with the desired image on top of the top-left-hand corner like in the screenshot I have provided from sitepoint but my issue is with the text inside the container box as it follows the image, therefore it overflows outside of the container, and currently starts before the top border. I think I have an issue with the nesting because I reckon that the background image needs to be inside everything else (otherwise I get it clipped no matter what I do). I will spend a bit more time on this to try and crack it. If I can't well, nevermind, I will revert to my "simpler" format for special paragraphs.
I will have a look at Firebug.
Thanks again.

[GregStenhouse]

You would have more control over the image if it was inserted separately, and not part of the note/tip/warning styles.
You could create a class under "img" in your stylesheet. Call it something like "note". Relevant properties might be:

Code: Select all

img.note
{
	position: relative;
	bottom: 20px;
	right: 30px;
}

Then place the cursor at the start of your note, and select Insert>Picture
Once inserted, right click the pciture and select Style Class>img.note

If this works for you and you have to insert notes etc a lot, you could set up the image+paragraph style as a snippet

[MC Hammer]

Hi everyone
Thanks to all for your hints, tips and tricks (Greg included). I think I have it nearly sussed out.
Just investigating a bit more the use of clear, float, fine-tuning the positioning of the image and testing on different browsers.

[NorthEast]

Just to throw in another idea, by using an autonumber class you could to automatically add in a span tag that contains the image. For example, say you have a div class for your note box, you could set its mc-auto-number-class property to a span class. Then set up that span class to include the image (as the background image) and also any positional offset to place the span tag outside the containing div.

[MC Hammer]

Hi everyone
I nearly have got this working but have a slight issue in that the image in the top-left corner seems to be creating a text-indent in the note title and the 1st line of the paragraph below. I have tried playing with the padding without success.
My code is something of the type:

Code: Select all

<div class="box">
            <div class="title">
                <img src="../Resources/ImageLibrary/MyImage.png" class="note" />Note title        	
          </div>
                <p class="note">text here</p> 
</div>

If I remove the image, there is no indent in the note title or the 1st line of the paragraph so clearly it is the image inserted in the second div that is causing the problem. What can I do to overcome this?
(Dave, I haven't had the opportunity to look at your last suggestion yet).

[GregStenhouse]

To help troubleshoot, can you include your CSS code for anything referencing (for example p. or img. ): "box", "title", and "note"

Cheers
Greg

[MC Hammer]

Hi Greg
Solved the issue, so I have no need to annoy everyone any further . Thanks for the offer to help.

[DurtyMat]

So what properties did you use in your css to create the final product

i am working on something that is going to use a floating text box and i wouldn't mind making the box look pretty

[MC Hammer]

So what properties did you use in your css to create the final product

i am working on something that is going to use a floating text box and i wouldn't mind making the box look pretty

Well, here are a few hints (don't have Flare here now and I am sure you can work it out by yourself . It takes some experimenting with values as a lot of the positioning depends on the size of your images)

See my example code in a previous post in this thread:
div.box: sets the box for the coloured outside box (where you can set background colour, border if any, width and position if required)
div.title: settings for the box title (font-size, font-colour. Text-indent may need to be set to a negative value)
img.note: where you specify your image, its position and background-position (top left), Float Left and set Left and Top to negative values depending on the size of your image)
p.note: settings for the paragraph (font-size, font-type and you may need to set text-indent to a negative value).

Preview and fine tune as you go. Good luck, it took me a while to get this working.

[DurtyMat]

thanks, your definitions of what I am trying to work with was just what i needed thanks for the help!