PDA

View Full Version : Wrapping text around an image


Bill Pitts
05-24-2011, 03:38 AM
Hello everyone,
I am using transparent PNG files on several of my pages in order to eliminate unnecessary clutter in the photos' backgrounds.

Now, what I'd like to do is wrap my text around the edge of the image, as I'm able to do in a program such as InDesign with Photoshop clipping paths. Is this possible with Dreamweaver (and CSS), or am I guilty of major wishful thinking?

Thanks,
Bill

johnMoss
05-24-2011, 04:47 AM
Wishful thinking? Not at all... It always helps here in the forum to post your code or even better a hosted site under construction, but in the immediate moment it sounds like putting your image and text in separate divs is the quick fix here... Yes you can create a photoshop image with precisely the desired look, which in turn commits the sin of making your copy invisible to the search bots.
Put your image and text into separate divs. Use css to position your image in the flow and the use the 'float' css rule to allow your copy to line up with the image. You can then use the margin and padding rules of divs to precisely position your text against the image. Simple guide to follow is margin affects what happens outside the div, padding affects the inside...

Bill Pitts
05-24-2011, 05:12 AM
Hi John,
My fault in not providing sufficient information. I'm familiar with the use of padding but my image, in this case, is circular.

http://www.newsouthernview.com/pages/text_wrap_dream.html

I'd like to wrap the paragraph to the right of the round image with a circular test wrap on the left side of the paragraph.

So is this possible?

Thanks,
Bill

Bill Pitts
05-24-2011, 05:13 AM
Did the image make it? I only see a little box with a question mark.

Bill

Bill Pitts
05-24-2011, 05:14 AM
Can I post the link?

domedia
05-24-2011, 12:42 PM
Can I post the link?
Absoolutely 8)

d a v e
05-24-2011, 01:12 PM
you can only align it to what would be the equivalent of the graphic frame in indesign - i.e. only a straight edge. i did see some jiggery pokery once on the net (was it css playground or eric meyer not sure) where using many divs you can fake a proper wrap but essentially you'll only get the text to flow against the hard edge of the image

gentleone
05-24-2011, 01:41 PM
It is possible and yes... it was cssplay, Dave. But you will end up with a lot of bloated em tags in your mark-up to get the desired result.
http://www.cssplay.co.uk/menu/embed.html

d a v e
05-24-2011, 02:46 PM
It is possible and yes... it was cssplay, Dave. But you will end up with a lot of bloated em tags in your mark-up to get the desired result.
http://www.cssplay.co.uk/menu/embed.html
yeah that's why i termed jiggery pokery :)

Bill Pitts
05-24-2011, 05:43 PM
Here is the link to the image in question text_wrap_dream.

http://www.newsouthernview.com/pages/text_wrap_dream.html

I may try the jiggery pokery method. From looking at the demos on CSSPlay, it looks like exactly what I'm after.

BTW Dave, what is the reference to eric meyer that you made?

Thanks,
Bill

gentleone
05-24-2011, 05:48 PM
It is also possible with jQuery by the way.
http://www.jwf.us/projects/jQSlickWrap/

EDIT:
Oh... but no IE support :)

Bill Pitts
05-24-2011, 06:01 PM
That IS slick!

Thanks,
Bill