Text wrap and images and more!

iagbegreg

iagbegreg

1st in a series of basic questions! ;)

so how do i get text to appear beside an image instead of beneath it?

And how do I change text size?

Thanks in advance!

ChainsawXIV

Here's how you can do this with some very basic HTML. Some of this is probably possible via Textile too, but I find that doing it this way is more flexible and powerful. Easier too.

To position an image to the left or right of your text on the page, you can use the _float_ CSS property in the image tag's _style_ attribute. You can float it to the left or right of the text, as you prefer. The image will appear on the page wherever the tag is, so place the image tag just before the text you want to run beside it. Here's the code:



To change the size or any other properties of a given section of text, you can use the _span_ tag with CSS in the _style_ attribute, similar to the example for floating images above. There's plenty of information on styling text with CSS around, so I"ll just stick to a simple example of what you asked for. Just replace the '8pt' with whatever size you like:

Your text goes here...

Challak

So how would you do that for images hosted/loaded onto OP? Would it work? Where do you confirm the image source?

GamingMegaverse

Yes it works for images on OP. I use it all the time- I pre-size the image (on my site typically 300px-400px wide), load it to OP, and just float image to left or right side. My players also do it for their logs. Check them out "here":http://www.obsidianportal.com/campaign/a-god-rebuilt/wikis/campaigns
killervp
"A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
"Duskreign's First Ever COTM":http://www.obsidianportal.com/campaigns/wyrmshadow/wiki_pages/112011
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/

madartiste

There's a way to do this natively with OP too.
When you use the picture tool to insert a picture, just click on the black down arrow under the actions column all the way to the right of the picture you want to insert. You should get some options showing up under your picture including radio buttons saying left, center, and right. The left and right options will cause the text to flow around your imagine just as if you had used the CSS Killervip gave you to "float" it.

SkidAce

So, researching.

Is there anyway to have text flow around a picture that is centered?

Basileus

There is no equivalent to "float: center". The simplest and most universally reliable method of accomplishing roughly the same effect is probably to make a table with three columns.

I know there is lots of discussion about how to do basically this same thing out there, but I haven't found a method I like.

@| text | image | text |@

|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lobortis orci in justo gravida porttitor eget quis justo. Curabitur elementum tincidunt urna non interdum. Nunc pellentesque et ipsum ut bibendum. Cras rhoncus ex vitae elit auctor auctor ut vel ligula. Donec rhoncus libero sit amet est bibendum, eget volutpat diam suscipit. Fusce vel cursus enim, ac sollicitudin sapien. Nam dignissim aliquam feugiat. Sed nec lobortis augue. Aliquam orci eros, semper non mi nec, rutrum eleifend mauris. Etiam tristique feugiat euismod. Phasellus non purus efficitur, gravida purus id, rutrum magna. Phasellus velit risus, efficitur quis consequat ac, euismod nec mauris. In rhoncus augue eget mollis blandit. Maecenas at neque tristique, porta dolor mattis, pellentesque neque. Aliquam sodales consectetur facilisis. Morbi neque dui, faucibus blandit nulla at, tempus rutrum purus.|!https://pbs.twimg.com/profile_images/1923032199/sun-icon.png!|Nullam eleifend lacinia odio, at aliquet quam imperdiet sit amet. Fusce ornare mauris sit amet nisl laoreet, eu aliquet sapien blandit. Sed sed sem egestas, tincidunt erat ut, semper elit. Praesent nec ultricies mi, ac vulputate tortor. Morbi ultricies accumsan blandit. Suspendisse vel porttitor urna. Integer condimentum lectus nulla, eu cursus libero pretium ut. Praesent sit amet dolor eu erat hendrerit suscipit id id metus. Pellentesque rhoncus pretium nibh, et maximus urna scelerisque vel. Cras sit amet elit sodales, pulvinar sem ac, congue justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas cursus mattis sodales. Etiam a malesuada lacus.|

SkidAce

Hmm. I could use that method, and manually move the text from cell to cell to make it look like its flowing around.

Thanks for the input.