How can i stop text writing through image? Options

[gsd12345]

I have used CSS to do the layout of my website however I find that the text writes across over an image. how do I make it so that the text wraps round the image rather than writing over it. I imagine I could stop this from happening by adjusting where the paragrph is to start and end in relation to the screen and picture and place an image in there, however, I imagine this could take a while. Is there a simple solution that gets me the result I want.

[gsd12345]

When my webpages open in a smaller window the different elements (ie the image, the text, the menu,) are all grouped together and overlapping. It looks as though this is because I have set the body to start 100 px from the edges of the screen. How can I make it so that the content of the pages dont all move like this in a smaller window and in fact hodl their position. Is it possible?

[Effovex]

It would most likely involve floating the image but a link to a page exhibiting the problem would help in giving specific advice.

[pandy]

It sound like you use 'position: absolute' in an unwise way, you have positioned everything relative the browser window. Is that so? Without seeing the page, all I can say is "Don't do that".

[gsd12345]

I have used position absolute. Is that whats causing it, should I remove this, if so should it be replaced with something else?

[pandy]

At least you shouldn't use it the way you have done. There are often many ways to accomplish something. As said, hard to make suggestions without knowing what you try to do.

[gsd12345]

Here is an example of what I mean (admittedly a bad one). I have positioned the image 100px from the right of the screen which is how I want it to be in a full screen, (I know the text overlaps on this example already). In a smaller screen it remains 100px form the right as the code instucts and then of course has the text overlapping it. I want this to not happen so that if the window is adjusted it doesnt move with it, is there a way of fixing it in place so that if the window is smaller it needs to be scolled to, or something like that?

[gsd12345]

[attachmentid=191

Here is an example of what I mean (admittedly a bad one). I have positioned the image 100px from the right of the screen which is how I want it to be in a full screen, (I know the text overlaps on this example already). In a smaller screen it remains 100px form the right as the code instucts and then of course has the text overlapping it. I want this to not happen so that if the window is adjusted it doesnt move with it, is there a way of fixing it in place so that if the window is smaller it needs to be scolled to, or something like that?

[gsd12345]

 sitecode2.htm ( 3.35k ) Number of downloads: 990

Here is an example, althougth the picture may not show the box where it will be is on here. As you can see the text goes right through it.

[pandy]

Yeah, you've positioned averything absolute. Try to losen that up some. You could float the image right. If you don't want the text to wrap around it, give the text section (you'll need to wrap it in an extra DIV) a rigt margin that makes it go free from the image.

[pandy]

I merged this thread with the one you had in the HTML forum.

[Ekpezu]

When my webpages open in a smaller window the different elements (ie the image, the text, the menu,) are all grouped together and overlapping. It looks as though this is because I have set the body to start 100 px from the edges of the screen. How can I make it so that the content of the pages dont all move like this in a smaller window and in fact hodl their position. Is it possible?

Try this:
Set the size using percentage(i.e 100%) rather than using the pixel
cos the 100 pixel is just like u using 10%