Positioning an image on my Mini Profile

[Alan Vende]

Forum URL: psychic-psyghtings.proboards.com

I have an image much like the new checkmark here on Support and am using it on my forum to show people 'authenticated' staff persons. I am having trouble, though, repositioning the image so it's next to my display name in my mini profile (much like David Clark's below):



I am using his as an example because I have the admin banner on my mini profile (and my staff's mini profile) like he does.

Right now, mine is below:



I think part of my problem may be that I put the HTML for it into my template and not in the Custom Mini Profile Creator plugin, like I assume is the case for David above, am I correct?

I was afraid that if I put it into the HTML area of the CMPC Plugin that it would override all of the HTML of my custom MP since I have it in the MP Template in the theme and not the Plugin itself.

Or am I just over thinking this? Probably am

Thanks for your help!

[David Clark]

It's moving to the next line down because you have the image enclosed within a <div>, which is a block-level element by default. Block elements occupy their own lines.

.staff-diamond {
display: inline-block;
}

This CSS will turn the div into an inline-block element, so it can reside next to your display name

[Brian]

As an additional note the image we use is absolute positioned inside the mini-profile which is relative positioned, exactly the same as how the admin banner is being positioned.

.mini-profile { position: relative; }
.staff-diamond { position: absolute; top: 16px; right: 2px; }

[Alan Vende]

Sept 13, 2015 12:16:52 GMT -8 David Clark said:

It's moving to the next line down because you have the image enclosed within a <div>, which is a block-level element by default. Block elements occupy their own lines.

.staff-diamond {
display: inline-block;
}

This CSS will turn the div into an inline-block element, so it can reside next to your display name

Sept 13, 2015 12:21:18 GMT -8 Brian said:

As an additional note the image we use is absolute positioned inside the mini-profile which is relative positioned, exactly the same as how the admin banner is being positioned.

.mini-profile { position: relative; }
.staff-diamond { position: absolute; top: 16px; right: 2px; }

Thank you both! I got it to work now!

[Azy]

I guessed at absolute positioning inside a relative parent container, 'cause that's exactly how I did the zodiac symbol on my own forum, in the top right corner
You're probably better off using the absolute positioning technique, 'cause the size of the parent container is unlikely to change width, plus you can position elements literally anywhere you like within that container, even referenced to the bottom if you wanted to put anything in the bottom corners.