How to put space between images and text in the forum descriptions

[jkh]

Following on from my Complex Forum Review on this thread https://help.forumotion.com/t149072-complete-mystery-of-madeleine-mccann-complex#1032344

@Draxion said he could help me with this following issue on my forum so I have copied the question from that thread, along with the section of the review, and made it into a separate topic as requested.




Forum Layout & Organization

The widgets are well placed, and I really like the twitter one for anything that relates to the topic. However, I feel that the 'Recent Topics' widget is too long. I agree that by filling out the space on the side with widgets is a good thing to not waste space, but I'd suggest using more widgets instead of extending the current ones. The another thing I suggest for this area is putting a bit more space between the images and the text in the forum descriptions. Additionally, these forum descriptions should be categorised under different titles. This will help users differentiate between general news and Madeleine McCann news.


How do I put space between the images? It's something I've tried to do in the past but was never successful.

[Draxion]

Thank you!

So you simply want to put a gap between the images and forum description, correct?

[jkh]

Yes @Draxion....at the moment my forum images look like the first screenshot with the text squashed up against the image and I'd like it to look like the second screenshot if possible.


I have tried doing it like this, but that hasn't worked:

[Draxion]

And you entered those images through the forum description coding, correct? Not the image host above where you fill out the text.

[jkh]

And you entered those images through the forum description coding, correct? Not the image host above where you fill out the text.

Noooooooo.....no idea what that is I'm afraid

I've put the text in the box and the image code in the image URL box - is that right?

[Draxion]

Okay, what you can do is make those descriptions a 'div'.

First put this in your CSS.

Code:

.forumDesc {
  margin-left: 10px;
}

And then put this inside all your forum descriptions.

Code:

<div class="forumDesc">YOUR FORUM DESCRIPTION HERE</div>

[jkh]

That didn't work.

[Draxion]

Alright, scratch that entire thing. I'll have to help you when I get home tonight since I am on mobile while at work.

[jkh]

Thank you, catch you later.

I'm in the UK so probably won't get your message til the morning.

[jkh]

Can anyone help me with this problem please?

At the moment the images on my forum look like this with the text jammed up against the image:





But I would like them to look like this, with a space if possible:

[Guest]

Hello,

I would say, just edit your pictures with a 10 pixel blank space on the right side. Just make sure you save it as png and not jpg as jpg does not support the transparent part.

Try this one, it has the 10 pixel transparent right hand side edge https://i.servimg.com/u/f37/18/65/11/87/ga_out10.png

This way you do not need coding at all

[SLGray]

If you know the CSS selector, you can add this to it:

Code:

margin-right:  YOUR NUMBERpx;