You are either not logged in or not registered with our community. Click here to register.
 
December 07, 2016, 04:49:47 AM

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

Click here if you are having problems.
Default Wide Screen Beige Lilac Rainbow Black & Blue October Send us your theme!

Hark!  The Herald!
Holiday Issue 2016

Wiki Blogs Dicebot

Author Topic: Wrapping Text Around Images | The «Floatleft» and «Floatright» Tags  (Read 3717 times)

0 Members and 1 Guest are viewing this topic.

Offline CaeliTopic starter

The Float Tags

The «floatleft» and «floatright» tags allow you to wrap your text around an image, which is aligned to the left or right of the post depending on which tag you use.

Unlike tables, the float tags allow for a more fluid page appearance. Your text will continue along in your post like water filling in a pitcher around a metal cube that is at the bottom; when there is no more image, it fills up the width of the post.

Sometimes, images that are used in the float tags need an added padding attribute in the code, so that the text is a comfortable distance away from the border of the image. This is used in the below examples, but for reference, appears in your bbcode as follows, with ## representing the number of pixels around the image

Code: [Select]
[img padding=##]Image URL here[/img]
The following two posts show the float codes, and provide an example of the tags in use.
« Last Edit: July 29, 2010, 10:01:18 AM by Caeli »

Offline CaeliTopic starter

The «Floatright» Tag
« Reply #1 on: July 11, 2010, 06:03:17 PM »
Code: [Select]
[floatright][img padding=15]http://elliquiy.com/elluiki/images/f/ff/FAQ_float-example.png[/img][/floatright] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, nisi cursus scelerisque ultrices, justo lectus euismod enim, quis tempus orci mi sed leo. Quisque in justo sit amet nunc venenatis dapibus. Nullam dapibus euismod lorem, at ullamcorper risus mattis sed. In facilisis accumsan dui, sit amet sagittis neque varius nec. Phasellus orci arcu, fringilla non condimentum vel, pretium sed ipsum. Fusce porta volutpat sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rhoncus, nisi et ultrices blandit, sapien velit viverra nulla, ut sagittis mi dolor id quam. Ut tortor enim, porttitor ut vestibulum in, egestas semper nunc. Suspendisse eget augue risus. Donec placerat sodales nunc, et porttitor diam hendrerit ac. Mauris nisl nisi, fermentum non interdum ac, fringilla consectetur felis. Nunc ultrices, enim vitae vehicula dapibus, sapien eros venenatis dui, non vestibulum justo sapien ac leo. ...


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, nisi cursus scelerisque ultrices, justo lectus euismod enim, quis tempus orci mi sed leo. Quisque in justo sit amet nunc venenatis dapibus. Nullam dapibus euismod lorem, at ullamcorper risus mattis sed. In facilisis accumsan dui, sit amet sagittis neque varius nec. Phasellus orci arcu, fringilla non condimentum vel, pretium sed ipsum. Fusce porta volutpat sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rhoncus, nisi et ultrices blandit, sapien velit viverra nulla, ut sagittis mi dolor id quam. Ut tortor enim, porttitor ut vestibulum in, egestas semper nunc. Suspendisse eget augue risus. Donec placerat sodales nunc, et porttitor diam hendrerit ac. Mauris nisl nisi, fermentum non interdum ac, fringilla consectetur felis. Nunc ultrices, enim vitae vehicula dapibus, sapien eros venenatis dui, non vestibulum justo sapien ac leo.

Morbi id nibh vel velit scelerisque lacinia id quis nulla. Nunc convallis nibh et elit rhoncus feugiat. Vivamus justo risus, ullamcorper molestie fringilla sit amet, ultrices ut lorem. Mauris sagittis facilisis placerat. Suspendisse sollicitudin ultrices felis, sit amet adipiscing neque ullamcorper id. Fusce purus magna, vehicula at consequat vitae, posuere at quam. Phasellus vel cursus risus. Sed sed felis sed sem dapibus rhoncus eget sit amet mi. Vestibulum neque enim, iaculis eget varius ut, volutpat et sem. Suspendisse nibh lectus, placerat pellentesque congue a, bibendum et lectus. Integer a nibh nibh, at pulvinar ipsum. Vestibulum est eros, eleifend sit amet laoreet eu, luctus id sapien. Aliquam congue, nisi sed aliquet ornare, sem purus vulputate velit, ac malesuada diam velit a velit. Mauris consequat feugiat elit, tempor auctor dui egestas at. Nam elementum congue dolor, at euismod lacus venenatis id. Pellentesque varius, orci sit amet sodales auctor, eros arcu adipiscing lectus, id volutpat elit felis non arcu.

Vivamus ac velit lorem, eget pellentesque urna. Proin lobortis nisl sed nisl luctus eget dictum sem malesuada. Ut dapibus semper convallis. Quisque quam neque, feugiat et placerat id, sollicitudin gravida mauris. Fusce lacus diam, dapibus vel rhoncus eget, ultrices ut est. Nunc luctus quam at velit vestibulum id imperdiet mi feugiat. In a orci vel risus lobortis luctus. Vivamus ultrices dictum nisl, ut volutpat dolor porta ac. Sed eget risus id velit bibendum condimentum. Aliquam erat volutpat. Nullam sapien diam, pellentesque nec dictum quis, laoreet eget libero. Quisque et pulvinar diam. Integer a tortor dolor, nec dapibus tellus. Suspendisse volutpat blandit lorem eget elementum. Sed vel dui quis enim laoreet malesuada.
« Last Edit: July 11, 2010, 06:04:22 PM by Caeli »

Offline CaeliTopic starter

The «Floatleft» Tag
« Reply #2 on: July 11, 2010, 06:03:50 PM »
Code: [Select]
[floatleft][img padding=15]http://elliquiy.com/elluiki/images/f/ff/FAQ_float-example.png[/img][/floatleft] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, nisi cursus scelerisque ultrices, justo lectus euismod enim, quis tempus orci mi sed leo. Quisque in justo sit amet nunc venenatis dapibus. Nullam dapibus euismod lorem, at ullamcorper risus mattis sed. In facilisis accumsan dui, sit amet sagittis neque varius nec. Phasellus orci arcu, fringilla non condimentum vel, pretium sed ipsum. Fusce porta volutpat sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rhoncus, nisi et ultrices blandit, sapien velit viverra nulla, ut sagittis mi dolor id quam. Ut tortor enim, porttitor ut vestibulum in, egestas semper nunc. Suspendisse eget augue risus. Donec placerat sodales nunc, et porttitor diam hendrerit ac. Mauris nisl nisi, fermentum non interdum ac, fringilla consectetur felis. Nunc ultrices, enim vitae vehicula dapibus, sapien eros venenatis dui, non vestibulum justo sapien ac leo. ...


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, nisi cursus scelerisque ultrices, justo lectus euismod enim, quis tempus orci mi sed leo. Quisque in justo sit amet nunc venenatis dapibus. Nullam dapibus euismod lorem, at ullamcorper risus mattis sed. In facilisis accumsan dui, sit amet sagittis neque varius nec. Phasellus orci arcu, fringilla non condimentum vel, pretium sed ipsum. Fusce porta volutpat sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rhoncus, nisi et ultrices blandit, sapien velit viverra nulla, ut sagittis mi dolor id quam. Ut tortor enim, porttitor ut vestibulum in, egestas semper nunc. Suspendisse eget augue risus. Donec placerat sodales nunc, et porttitor diam hendrerit ac. Mauris nisl nisi, fermentum non interdum ac, fringilla consectetur felis. Nunc ultrices, enim vitae vehicula dapibus, sapien eros venenatis dui, non vestibulum justo sapien ac leo.

Morbi id nibh vel velit scelerisque lacinia id quis nulla. Nunc convallis nibh et elit rhoncus feugiat. Vivamus justo risus, ullamcorper molestie fringilla sit amet, ultrices ut lorem. Mauris sagittis facilisis placerat. Suspendisse sollicitudin ultrices felis, sit amet adipiscing neque ullamcorper id. Fusce purus magna, vehicula at consequat vitae, posuere at quam. Phasellus vel cursus risus. Sed sed felis sed sem dapibus rhoncus eget sit amet mi. Vestibulum neque enim, iaculis eget varius ut, volutpat et sem. Suspendisse nibh lectus, placerat pellentesque congue a, bibendum et lectus. Integer a nibh nibh, at pulvinar ipsum. Vestibulum est eros, eleifend sit amet laoreet eu, luctus id sapien. Aliquam congue, nisi sed aliquet ornare, sem purus vulputate velit, ac malesuada diam velit a velit. Mauris consequat feugiat elit, tempor auctor dui egestas at. Nam elementum congue dolor, at euismod lacus venenatis id. Pellentesque varius, orci sit amet sodales auctor, eros arcu adipiscing lectus, id volutpat elit felis non arcu.

Vivamus ac velit lorem, eget pellentesque urna. Proin lobortis nisl sed nisl luctus eget dictum sem malesuada. Ut dapibus semper convallis. Quisque quam neque, feugiat et placerat id, sollicitudin gravida mauris. Fusce lacus diam, dapibus vel rhoncus eget, ultrices ut est. Nunc luctus quam at velit vestibulum id imperdiet mi feugiat. In a orci vel risus lobortis luctus. Vivamus ultrices dictum nisl, ut volutpat dolor porta ac. Sed eget risus id velit bibendum condimentum. Aliquam erat volutpat. Nullam sapien diam, pellentesque nec dictum quis, laoreet eget libero. Quisque et pulvinar diam. Integer a tortor dolor, nec dapibus tellus. Suspendisse volutpat blandit lorem eget elementum. Sed vel dui quis enim laoreet malesuada.
« Last Edit: March 14, 2011, 10:00:55 PM by Caeli »

Offline CaeliTopic starter

The Float Tags and Text
« Reply #3 on: July 11, 2010, 06:09:34 PM »
You can also use the float tags to wrap text around tables or, similarly, around letters or sections of text, for an interesting effect. :-) The tags are used the same way; simply enclose the tags around whatever you want floated, and leave everything else outside of the tag.

An example of floating a table can be found in the The Guide to Elliquiy.
An example of floating a letter and a word can be found below.



Code: [Select]
[floatleft][size=7][font=georgia][b]L[/b][/font][/size][/floatleft]orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, nisi cursus scelerisque ultrices, justo lectus euismod enim, quis tempus orci mi sed leo. Quisque in justo sit amet nunc venenatis dapibus. Nullam dapibus euismod lorem, at ullamcorper risus mattis sed. In facilisis accumsan dui, sit amet sagittis neque varius nec. Phasellus orci arcu, fringilla non condimentum vel, pretium sed ipsum. Fusce porta volutpat sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rhoncus, nisi et ultrices blandit, sapien velit viverra nulla, ut sagittis mi dolor id quam. Ut tortor enim, porttitor ut vestibulum in, egestas semper nunc. Suspendisse eget augue risus. Donec placerat sodales nunc, et porttitor diam hendrerit ac. Mauris nisl nisi, fermentum non interdum ac, fringilla consectetur felis. Nunc ultrices, enim vitae vehicula dapibus, sapien eros venenatis dui, non vestibulum justo sapien ac leo.
L
orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, nisi cursus scelerisque ultrices, justo lectus euismod enim, quis tempus orci mi sed leo. Quisque in justo sit amet nunc venenatis dapibus. Nullam dapibus euismod lorem, at ullamcorper risus mattis sed. In facilisis accumsan dui, sit amet sagittis neque varius nec. Phasellus orci arcu, fringilla non condimentum vel, pretium sed ipsum. Fusce porta volutpat sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rhoncus, nisi et ultrices blandit, sapien velit viverra nulla, ut sagittis mi dolor id quam. Ut tortor enim, porttitor ut vestibulum in, egestas semper nunc. Suspendisse eget augue risus. Donec placerat sodales nunc, et porttitor diam hendrerit ac. Mauris nisl nisi, fermentum non interdum ac, fringilla consectetur felis. Nunc ultrices, enim vitae vehicula dapibus, sapien eros venenatis dui, non vestibulum justo sapien ac leo.


Code: [Select]
[floatleft][size=6][b]For Example[/b][/size][/floatleft]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, nisi cursus scelerisque ultrices, justo lectus euismod enim, quis tempus orci mi sed leo. Quisque in justo sit amet nunc venenatis dapibus. Nullam dapibus euismod lorem, at ullamcorper risus mattis sed. In facilisis accumsan dui, sit amet sagittis neque varius nec. Phasellus orci arcu, fringilla non condimentum vel, pretium sed ipsum. Fusce porta volutpat sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rhoncus, nisi et ultrices blandit, sapien velit viverra nulla, ut sagittis mi dolor id quam. Ut tortor enim, porttitor ut vestibulum in, egestas semper nunc. Suspendisse eget augue risus. Donec placerat sodales nunc, et porttitor diam hendrerit ac. Mauris nisl nisi, fermentum non interdum ac, fringilla consectetur felis. Nunc ultrices, enim vitae vehicula dapibus, sapien eros venenatis dui, non vestibulum justo sapien ac leo.
For Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, nisi cursus scelerisque ultrices, justo lectus euismod enim, quis tempus orci mi sed leo. Quisque in justo sit amet nunc venenatis dapibus. Nullam dapibus euismod lorem, at ullamcorper risus mattis sed. In facilisis accumsan dui, sit amet sagittis neque varius nec. Phasellus orci arcu, fringilla non condimentum vel, pretium sed ipsum. Fusce porta volutpat sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rhoncus, nisi et ultrices blandit, sapien velit viverra nulla, ut sagittis mi dolor id quam. Ut tortor enim, porttitor ut vestibulum in, egestas semper nunc. Suspendisse eget augue risus. Donec placerat sodales nunc, et porttitor diam hendrerit ac. Mauris nisl nisi, fermentum non interdum ac, fringilla consectetur felis. Nunc ultrices, enim vitae vehicula dapibus, sapien eros venenatis dui, non vestibulum justo sapien ac leo.
« Last Edit: July 11, 2010, 06:10:56 PM by Caeli »