Positioning an icon in p.note style

[ClareS]

Hello
I have created a class of the p tag: p.note, which I use to highlight notes in my document. I have added an image (note icon) but cannot seem to position it correctly.
To position it, I went to the Background tab in the properties within the stylesheet. First I selected X Left and Y Top, this positions my icon too high in the box:

note1.PNG

I then changed it to X Left and Y Center, which is fine if the note only takes up one line, but if it goes onto multiple lines then it is centered relative to all text, rather than just the 'Note:' text, which is what I want:

note2.PNG

Does anyone know how I can position this icon so it is centered relative to just the 'Note:' text (which I added using the autonumber function).
Many thanks
Clare

[NorthEast]

To move the icon down slightly, just set a px value for the background Y value; e.g. 4px.

[Lydia]

similar thread: http://forums.madcapsoftware.com/viewto ... nd#p103176
the position settings don't work there, when using pixels ...

[NorthEast]

similar thread: http://forums.madcapsoftware.com/viewto ... nd#p103176
the position settings don't work there, when using pixels ...

BTW, that's a bad link.

It appears the background position in Simplified view doesn't work (it uses CSS that isn't supported by many browsers).
I tend to use Advanced view, so I'd not seen that before.

Anyway, use the background-position property (available in advanced view); you set the x and y positions with a space in between, e.g. 0px 4px.

[AudreyLange]

I used the background-position property (with percentages), and it looks awesome when I have a note that’s just 1-3 lines of text, but the problem with using percentages is that, as the note gets longer, the icon moves further down inside the note box.

Just like the original poster, I’d like for the icon to always stay aligned with the word “Note” at the top, so I tried to use pixels instead of percentages, but when I do this, the background image doesn’t show up at all. I’ve tried just 1px 1px and up to 50px, and the image just doesn’t show up. Not sure what this is all about…

If anyone has an idea of how to fix this, I am all ears!

[NorthEast]

Setting the background position in px works fine for me, using PNG images in a HTML5 output.

I'm not sure if px works for PDF though; PDFs have a few issues with background images.

[Lydia]

I'm sorry for the wrong link, it should have been this one: http://forums.madcapsoftware.com/viewto ... =9&t=19721

@ Dave - which tag are you using, it seems a bit like the p tag does not work well with background-position and pixels. I'm looking at html5 output. The p.note tags don't show the icon, the div.note tags (with a p inside) do show it.

[NorthEast]

@ Dave - which tag are you using, it seems a bit like the p tag does not work well with background-position and pixels. I'm looking at html5 output. The p.note tags don't show the icon, the div.note tags (with a p inside) do show it.

I use p tags (and div tags) that have background-position set using pixels; they work fine for HTML5 and WebHelp.

[ClareS]

Thanks all for your help.
Dave Lee, that has worked perfectly for me.
Sorry for slow response, I didn't get the usual email telling me someone had replied to my post!
Thanks again,
Clare

[ClareS]

Yay! Just how I wanted it!

reply_img.PNG

[ClareS]

Ah yes I've realised now. This works fine for HTML5, but still can't get it to work for PDF.

[Psider]

You could try using an unordered list and setting the list-style-image property. You have less control on placement of the image though. But it might be worth a look for you.

Something like this:
.Note {list-style-image: url('MyImage.png');
background-color: lightblue;
border: 1px solid darkblue;}

<ul class="Note">
<li>Note: Peter Piper picked a peck of pickled peppers. If Peter Piper picked a peck of pickled peppers, how many peppers did Peter Piper pick? She sells seashells by the sea shore. If she sells seashells by the sea shore, how many sea shells does she sell? Peter Piper picked a peck of pickled peppers. If Peter Piper picked a peck of pickled peppers, how many peppers did Peter Piper pick? She sells seashells by the sea shore. If she sells seashells by the sea shore, how many sea shells does she sell?</li>
</ul>

UL_Note_Image.png

* list-style-image on the ul may or may not work for all browsers - I'm not sure it's entirely kosher, but have a play on the li and see what happens too.