homepage Welcome to WebmasterWorld Guest from 23.23.8.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Newbie question: relative positioning and text wrapping
Skoobouy

10+ Year Member



 
Msg#: 580 posted 12:05 am on Jan 31, 2003 (gmt 0)

My problem is quite simple. I have an image that I've displaced into the corner of a table. I want the text to wrap around the image -as it is now placed- and not around its original location. Is there a way I can rewrap the text to the translated image?

Let's see - how to describe this better...? I see there are not UBB codes for posting images. May I link to an image?

Thanks for any help you can offer.

 

pendanticist

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 580 posted 1:04 am on Jan 31, 2003 (gmt 0)

Welcome to WebmasterWorld [webmasterworld.com] Skoobouy :)

Someone posted this the other day. Sorry, can't recall whom to give the credit to.

<img src='img/foo.jpg' align='right' vspace='2' hspace='2'>

And the text goes around it.

Pendanticist.

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 580 posted 1:24 am on Jan 31, 2003 (gmt 0)

Maybe try Floating [w3schools.com] your image left or right. Then you can apply padding or margin to adjust it's position.

<img src="path/to/image/" style="float: left;" />

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 580 posted 1:30 am on Jan 31, 2003 (gmt 0)

Skoobuoy...Welcome

pendanticist...wot no CSS on the CSS forum ;) so I'm taking your nickname literally

Skoobuoy:

CSS
td img {float: right;}

HTML
<table>
<tr><td>
<img src="your.gif" width="30" height="30" alt="" />
lots and lots of text here
</td>/tr>
</table>

if you float an image then type however much text you want it will wrap around...
You can then also give it margins as required to space the text away from the image..

e.g.
td img {float: right; margin-left: 20px; margin-bottom: 20px;}

Suzy

<added>Birdman you must be faster at typing than me!</added>

pendanticist

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 580 posted 1:46 am on Jan 31, 2003 (gmt 0)

pendanticist...wot no CSS on the CSS forum so I'm taking your nickname literally

CSS?!? Agghh!

Would you believe me if I told you I never noticed the forum? Yikes! :o

Pendanti...uh, Pedanti, no, ummm, Pedicu...

Skoobouy

10+ Year Member



 
Msg#: 580 posted 8:21 am on Jan 31, 2003 (gmt 0)

Thank you all so much for the advice. The feedback here is excellent! However, I already know how to wrap text. That isn't the problem I'm describing. (This is why I need a visual aid). Again, the text IS wrapping the image; HOWEVER, it only wraps around the area where the image would be if it wasn't relatively-positioned. So there's a blank backwards-L shape between the image and the text where the text should be.

The special problem is that the content I'm speaking of is all placed inside of a one-cell table.

Here'll, I'll illustrate:

Before CSS:

/-----------------------------\
¦0o0o0o0 Text text text text ¦
¦0imageo Text text text text ¦
¦0o0o0o0 Text text text text ¦
¦Text text text text Text text¦
¦Text text text text Text text¦
¦Text text text text Text text¦
\-----------------------------/

After CSS:

0o0o0o0
0imageo------------------------\
0o0o0o0 * Text text text text ¦
¦* * * * * Text text text text ¦
¦* * * * * Text text text text ¦
¦Text text text text Text text ¦
¦Text text text text Text text ¦
¦Text text text text Text text ¦
\-----------------------------/

The asterisks represent all the extra space I'm trying to fill up. Here's my code so far:

<td width="100%">

<img src="snowman.jpg" style="position:relative; bottom:46px; right:54; float:left;">

Text text text Text text text Text text text Text text
text Text text text Text text text Text text text Text
text text

</td>

Thanks again. Such quick feedback!

Skoo

Nick_W

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 580 posted 8:29 am on Jan 31, 2003 (gmt 0)

Welcome to WebmasterWorld! [webmasterworld.com]

Hmmm... not sure why you'd need position: relative; in there.

Am I missing something as I'm late to the party? ;)

Nick

Skoobouy

10+ Year Member



 
Msg#: 580 posted 10:28 am on Jan 31, 2003 (gmt 0)

CSS is the easiest way for me to take an oversize image and sit it on top the upper-left corner of a content 'window' (a table with one cell). But there are several such windows of varying length. The only way to ensure correct alignment is if I place the image inside the table's content, and then relatively position it above the upper left corner. Unfortunately, position:relative won't change the way the wrapped text interacts with the picture. Hence, my visuals.

If there's any confusion about this, I _do_ have an explanatory image I could link to, if I was given permission.

Nick_W

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 580 posted 10:30 am on Jan 31, 2003 (gmt 0)

Sorry, no links [webmasterworld.com]

Nick

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 580 posted 11:43 am on Jan 31, 2003 (gmt 0)

Using negative margins should do the same thing for you without relative positioning.

<img src="/****/" style="margin-top: -20px;" />

Skoobouy

10+ Year Member



 
Msg#: 580 posted 7:30 pm on Jan 31, 2003 (gmt 0)

Hey! That's great! Thanks! :-D

... Update. Well, it almost works. It definitely solves the text problem. Unfortunately, it slides the image under the table corner, and not over it, so I lose most of the image. Think of taking a painting and sliding it underneath the frame. *_* Thanks, though.

Skoobouy

10+ Year Member



 
Msg#: 580 posted 12:21 pm on Feb 1, 2003 (gmt 0)

Hmm. Would I be able to use the above recently mentioned techinque if I gave the image a layer property and brought it to the front? I'll try it. (Never used layers before; let's see what happens.)

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 580 posted 2:11 pm on Feb 1, 2003 (gmt 0)

Yes, you can use the z-index property [w3schools.com]. You're gettin' there ;)

Skoobouy

10+ Year Member



 
Msg#: 580 posted 4:34 pm on Feb 1, 2003 (gmt 0)

OK! Much success. Here are my notes:

1. Unfortunately, the Z-index property has no effect if I use margin:-x to move the image. The reason is that I'm combining CSS with standard tables. Now, the problem is, when I set the margins of the corner image to negative numbers, the browser understands this to mean that such-and-such x-y coordinates of the image aren't important. Thus, no matter if I set the Z-index to 10000000, the 3/4 of the image that move outside of the <td> cell will never appear. They're doomed to hide behind the table corner.

2. For this reason, it was necessary to use position:relative; - it allows the image to bleed outside of the table cell. One might say that relative positioning gives the image a default Z-index priority.

3. This still leaves me with poorly wrapped text. No problem! I just apply negative margin properties to the other sides of the image, and the text behaves as it ought.

My code looks like this:
<td width="100%">
<img src="gravestone.jpg" align="left" style="position:relative; bottom:45px; right:53px; margin-bottom:-45px; margin-right:-53px;">
</td>

The end result? Each "update window" (a one-celled table with a thick decorated border and text content) has an accompanying graphic that sits on top of the upper left corner; the content wraps smoothly around the lower-right portion of the corner image. Beautiful!

Thanks for your help guys.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved