The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Picture on the Side of the Text

View previous topic View next topic Go down

Solved Picture on the Side of the Text

Post by ilo on September 30th 2013, 7:17 pm

Hey all,
I am about to make this post that will include a numerous types of Topics in one Post and each Topic will contain a picture of its own.
So I was wondering if there is a way to be able to attack the picture on the side of the topic.
Heres an example:

I couldn't find an better 'image example' but just so to get my point. So what is this showing? the Image simple compresses the Text, using its space and the text automatically narrows, instead of just being placed under.

ilo
Forumember

Male Posts : 190
Reputation : 21
Language : english
Location : Pr

http://alchemists.7forum.net

Back to top Go down

Solved Re: Picture on the Side of the Text

Post by Ange Tuteur on October 1st 2013, 5:03 pm

Hello ilo,

I believe this can be done using HTML block elements and some inline CSS. I've setup an example here.

I don't use html much, but making the image float to the left seems to allow the text to wrap around the image. Adding a 12px margin keeps the text from coming too close to the image.

This is the code from the example:
Code:
<div style="float:left;margin:12px;"><img src="http://i72.servimg.com/u/f72/18/45/41/65/box10.png"></div><p>This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it.</p>
I've placed the image in a block-level element and made it float to the left, the paragraphs will then wrap around the image when you've written enough.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Picture on the Side of the Text

Post by ilo on October 1st 2013, 8:08 pm

Hey Seth,
I tried to make it work somehow it just doesn't appear the picture just the whole code. I tried to enable the HTML but still doesn't work!!!

ilo
Forumember

Male Posts : 190
Reputation : 21
Language : english
Location : Pr

http://alchemists.7forum.net

Back to top Go down

Solved Re: Picture on the Side of the Text

Post by Ange Tuteur on October 1st 2013, 8:51 pm

Try this for enabling HTML for your board:

http://help.forumotion.com/t35636-enabling-html#217290

You'll have to make sure you tick it in your profile, and check the message options while posting a message to ensure that its enabled.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Picture on the Side of the Text

Post by ilo on October 1st 2013, 9:19 pm

Nice,
It works wonderful but I am a bit worried about security reasons.
Can it be enabled just for admins, and disabled for members? Smile

ilo
Forumember

Male Posts : 190
Reputation : 21
Language : english
Location : Pr

http://alchemists.7forum.net

Back to top Go down

Solved Re: Picture on the Side of the Text

Post by Ange Tuteur on October 1st 2013, 9:40 pm

No, I do not believe that is possible. If you have concerns you can disable it and use bbcode instead.

The code bellow should give the same effect using bbcode.
Code:
[table style="float:left;margin:12px;"][tr][td][img]http://i72.servimg.com/u/f72/18/45/41/65/box10.png[/img][/td][/tr][/table]This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it. This block floats to the left of the document as the text wraps around it.
The 12px margin keeps the text from coming too close to the image.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Picture on the Side of the Text

Post by ilo on October 1st 2013, 9:45 pm

Ok this one works to Seth,
Ill use this on better, since bbcode is automatically enabled Smile
thank you.

ilo
Forumember

Male Posts : 190
Reputation : 21
Language : english
Location : Pr

http://alchemists.7forum.net

Back to top Go down

Solved Re: Picture on the Side of the Text

Post by SLGray on October 2nd 2013, 6:58 am

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35659
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum