IPB

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image Floating With Text Wrapping, Useful for article style posts
CPU
post Dec 4 2010, 11:23 AM
Post #1


Xtreme Memberr
Group Icon

Group: Root Admin
Posts: 398
Joined: 22-August 09
Member No.: 211



Examples shown using a 1024 wide screen



Section 1 Left Floating

image
We have added a new BB Code that allows text to be wrapped around an image.

In this example we have set the image location to the left. The subsequent text then appears to the right of the image and continues to do so until it gets below the bottom of the image and then will move under the image as it has done here.

The text is typed in immediately after the "imgf" tags on the same line. Very handy for article style posts. Below is the code that was used to generate the effect. There is also an automatic version listed in the "Quick Access" table on the left of screen when posting in the full editor window. We have also used the "justify" BB code here to keep the text even as you would see in a magazine article. You can also set the float of the image so that it appears on the right of the screen. The text is still typed in after the "imgf" tags as shown in section 2 below. We hope you find this a useful tool.

CODE
[imgf=left]url address of image[/imgf] Text here



Section 2 Right Floating


image
We have added a new BB Code that allows text to be wrapped around an image.

In this example we have set the image location to the right. The subsequent text then appears to the left of the image and continues to do so until it gets below the bottom of the image and then will move under the image as it has done here.

The text is typed in immediately after the "imgf" tags on the same line. Very handy for article style posts. Below is the code that was used to generate the effect. There is also an automatic version listed in the "Quick Access" table on the left of screen when posting in the full editor window. We have also used the "justify" BB code here to keep the text even as you would see in a magazine article. You can also set the float of the image so that it appears on the left of the screen. The text is still typed in after the "imgf" tags as shown in section 1 above. We hope you find this a useful tool.

CODE
[imgf=right]url address of image[/imgf] Text here



Section 3 Text before and after image Left Floating

In this example we have started the text before the "imgf" tags. The text is typed in immediately before the "imgf" tags on the same line. We continued typing for some time to get a certain number of lines to appear above the image and then when we though there was an appropriate ammount.....>
image
<.....We started typing after the 'imgf" tags. The end effect is the images is wrapped in text on the top, right hand side and bottom. Again, this gives the effect of a magazine article style layout.

We still used the "justify" BB code on the text. To help control the wrapping we open and closed the "justify" tags before the "imgf" tag and then open and closed them again after the "/imgf" tag. This ensured that the justified text would wrap exactly on the character we wanted it to. In this case the '>' of the before text and the '<' of the after text. We are continuing to write here just so that we can put enough text in to get the text to eventually make its way under the image. Again you can use the same principals when floating the image to the right.

Of course in all cases the text wrapping point, unles using the "justify" tags as we did here, will change depending on the monitor/screen width. Below are the codes that were used to generate the effect.


CODE
[justify]Text here[/justify][imgf=left]url address of image[/imgf][justify]Text here[/justify]


--------------------
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



Lo-Fi Version Time is now: 1st November 2014 - 09:35 PM