Welcome to WebmasterWorld Guest from 54.159.214.250

Forum Moderators: not2easy

Newbie question: relative positioning and text wrapping

   
12:05 am on Jan 31, 2003 (gmt 0)

10+ Year Member



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.

1:04 am on Jan 31, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

1:24 am on Jan 31, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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;" />

1:30 am on Jan 31, 2003 (gmt 0)

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



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>

1:46 am on Jan 31, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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...

8:21 am on Jan 31, 2003 (gmt 0)

10+ Year Member



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

8:29 am on Jan 31, 2003 (gmt 0)

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



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

10:28 am on Jan 31, 2003 (gmt 0)

10+ Year Member



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.

10:30 am on Jan 31, 2003 (gmt 0)

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



Sorry, no links [webmasterworld.com]

Nick

11:43 am on Jan 31, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

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

7:30 pm on Jan 31, 2003 (gmt 0)

10+ Year Member



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.

12:21 pm on Feb 1, 2003 (gmt 0)

10+ Year Member



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.)
2:11 pm on Feb 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes, you can use the z-index property [w3schools.com]. You're gettin' there ;)
4:34 pm on Feb 1, 2003 (gmt 0)

10+ Year Member



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.

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month