Wrapping text around an image?

Post by **Dray** » Tue Jan 31, 2006 2:03 pm

O_o I'm wondering if you happen to know how to wrap text around an image using basic HTML? I'd just like to have my image up on one side of the page, and have the text right next to it and then continuing beneath it, without using stupid tables. Is there any simple way to do that?

dracosinfernoweyr · Post by **dracosinfernoweyr** » Tue Jan 31, 2006 2:06 pm

I use <img src=""align="right"> (or left), ends up looking like this. ^^

Keilin Alyr · Post by **Keilin Alyr** » Tue Jan 31, 2006 2:07 pm

Are you talking about IMG ALIGN tags perhaps? It's been a while since I touched any html that wasn't my own copy-paste. >.<

I did find a fun little site that describes what I think you're talking about: http://www.geocities.com/SiliconValley/6658/wrap.html

Though it looks like Kayla beats me! ^_^

Shiolar · Post by **Shiolar** » Tue Jan 31, 2006 2:08 pm

Ooooh! Ooooh! I know that one!

In your image tag, you simply include an 'align' section. For example!

Code: Select all

<p align="left"><img src="image.gif" border="0" align="left">Your text here</p>

And then all your text wraps nicely around the image. It works on both the left and the right.

Post by **Dray** » Tue Jan 31, 2006 2:17 pm

Ooh, that kind of works! Thanks... only the text seems to be flush right up to the image, and I was hoping for a gutter of a few pixels. It's a thumbnail, so I can't just do 'border="5"', since that makes this ugly blue colour surrounding it...

http://www.graham-russell.co.uk/ud/topic.php?id_top=437

Here's the link so that you can see what I mean. Right now the code looks like this:

{a href="http://dracothrope.lmfao.org.uk/random/2006/UDAGT.jpg" target="new"}{img src="http://dracothrope.lmfao.org.uk/random/2006/UDAGTP.jpg" border="5" align="left"}{/a}

(With'<' and '>' brackets instead, of course.)

What can I do to put a space between the image and the text, but keep a nice white colour between the two? :\

Xenoqueen · Post by **Xenoqueen** » Tue Jan 31, 2006 2:22 pm

Do this.

Code: Select all

<img src="pic" align="left/right" hspace="#" vspace="#">

Hspace and Vspace will be that invisible border you want.

Post by **Dray** » Tue Jan 31, 2006 2:25 pm

Perfect, thanks, Phe! *hugs!*

Thanks, everyone, for responding so quickly! ^_^ *jigs* Much better, now.

Mystic Dragon · Post by **Mystic Dragon** » Tue Jan 31, 2006 2:27 pm

*stares* Where'd you find this UD diary thing? :3 I should add my three. Need to do up some quick pics for them anyway.

Also, any objections to starting the RP on this forum?

Post by **Dray** » Tue Jan 31, 2006 2:49 pm

XD Kat found it. :3 It's a fun place to wangst. *likes it* X33

And none from me, of course!