homepage Welcome to WebmasterWorld Guest from 54.166.8.138
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Preventing image overlapping text?
kapow




msg:590208
 5:28 pm on Aug 2, 2002 (gmt 0)

I'm using 'aling right' on an image so text flows nicely round the image. If the window size is reduced a lot then the image overlaps the text.

Is there a way to stop overlap?
Or at lease have the text on top?

<img src="pic.jpg" ..... align="right">

 

Nick_W




msg:590209
 5:32 pm on Aug 2, 2002 (gmt 0)

Yes.

give the image a margin and use float instead.


.imageright {
float: right;
margin: 5px;
}

Nick

tedster




msg:590210
 5:35 pm on Aug 2, 2002 (gmt 0)

One way would be to use a layout that forces a minimum width. Then, with a very small window you get horizontal scrolling, but at least the page stays usable.

The min-width attribute for a div (CSS-2 browsers only) is a good way to do this in a liquid layout.

Also, just a note that align is a deprecated attribute in HTML. The recommendation is to move it to CSS.

Nick_W




msg:590211
 5:38 pm on Aug 2, 2002 (gmt 0)

Only problem is that IE doesn't support it Tedster, which unfortunately makes it next to useless :(

Nick

Gene




msg:590212
 5:43 pm on Aug 2, 2002 (gmt 0)

I've had the EXACT SAME annoying problem on my photo album layouts.

Mind you though, I'm still a Table guy. The solution I found might have a related counterpart in "CSS Land."

In my case, I had to adjust the table width to accomodate the text and graphic. The example below would be changed from 80% to perhaps 100% width.

BUT, another solution that also helped was putting in a <br> tag in the text... Notice that I forced "That's all Folks!" to take up 2 lines. This solution actually helped a lot more than adjusting my Table widths.

<table width="80%"><tr><td>
<img src="PIC.jpg" align="right">
<BR>
That's all<BR>
Folks!
</td></tr></table>

[edited by: Gene at 5:49 pm (utc) on Aug. 2, 2002]

tedster




msg:590213
 5:43 pm on Aug 2, 2002 (gmt 0)

LOL! I barely ever use IE these days, except when testing a new page template.

A hack which would probably work is a 1px high invisible gif that was the minimum width you desire. You could place it anywhere that was unobtrusive.

Nick_W




msg:590214
 5:47 pm on Aug 2, 2002 (gmt 0)

Me too Tedster, Opera all the way!

Actually the best solution IMO is not to worry about it!

If people have tiny window sizes they will expect oddities like that...

Nick

rewboss




msg:590215
 6:26 pm on Aug 2, 2002 (gmt 0)

CSS float:right; does the same job as HTML align="right".

Basically, what it does is to remove the object (it doesn't have to be an image) from its usual position (a bit like position:relative; does) and moves it to the right until it bumps up against either the edge of the containing element or another floated element.

The object is now removed from the normal flow of the text. Text will, however, flow around the object -- as long as it can break the lines at convenient places. If it can't, then it has no choice but to appear superimposed over the floated object.

If you didn't float the object, and the object was too wide, it would force horizontal scrolling. But that's because the object would be part of the text flow itself. Once you float it, it's taken out of the flow.

The cure is to make sure that your images aren't too wide for the containing element and the text that has to flow around it. If, at 800x600, there is not enough room for about five or six average-length words on one line (this is a guesstimate), you will need to either reduce your image or widen the containing element. Or find some other solution.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
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