I need to add two images to a <p> class

[erinep23]

I'm creating error/confirmation messages. I actually need two images to be in one <p> tag, however. The first image is the message decoration on the left, and the second image (the "x") would be at the very right. After Winona Ryder-ing code from MadCap's Advanced Web template, I have the image on the left - but how can I get the "x" on the very right, or is that even possible?

The css style looks like this:

p.note
{
background-color: #3e3e3e;
background-image: url('../Images/NoteIcon.png');
background-repeat: no-repeat;
border: solid 1px #404040;
border-radius: 6px;
color: #b3b3b3;
mc-auto-number-format: '{b}{color #bed230}Note: {/color}{/b}';
padding-bottom: 10px;
padding-left: 40px;
padding-right: 10px;
padding-top: 10px;
}

I have attached two images - one of what it looks like, and one where I have lazily added "x" marks where I want the "x" image to go.

Thanks in advance for your help!

[Paulie]

Hi there,

Assuming that these notes will be used in an online environment only, then you could use before and after pseudo-elements to achieve this.

Take a look at the before and after examples at the following link:
http://www.w3schools.com/css/css_pseudo_elements.asp

[erinep23]

....which of course my company won't let me open...ugh

[Paulie]

I haven't tried this in Flare for any side-effects, but here is an example of what you would have to add to your CSS (including updates to your existing p.note style):

Code: Select all

p.note
{
display: inline-block;
background-color: #3e3e3e;
border: solid 1px #404040;
border-radius: 6px;
color: #b3b3b3;
mc-auto-number-format: '{b}{color #bed230}Note: {/color}{/b}';
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}

p.note::before {
    content: url(beforeimage.gif);
}


p.note::after {
    content: url(afterimage.gif);
    float:right
}

Notes:

• The display: inline-block; line allows the paragraph to resize to fit the text (up to 100% of the width of the parent element). Remove this line if you want all notes to be 100%.
• There are a few issues to overcome in terms of text and image alignment, but this will hopefully send you in the right direction.

[erinep23]

Thanks but no dice <sigh>

[ChoccieMuffin]

I don't know if it would help you, but the latest CSS webinar that Mike Hamilton presented might have a solution, involving divs and stuff. You wouldn't be wasting an hour of your life watching it... (Don't have a link to it but it's bound to be somewhere on the Madcap website.)