|
|
Posted by Chris Beall on 01/03/06 00:18
Joe Magiera wrote:
> I'm using just straight plain simple .html with the Windows Notepad editor.
> As they say in the 21 century, a web page picture is worth a thousand words.
> Please look at the first picture on this web page:
>
> http://www.tollianweb.com/uc/Xevious/Xevious.html
>
> Using simple .html, how do I keep all the text over on the right side? As
> you see on the page, when there is too much text, it spills down underneath
> the picture. Any help/advice much appreciated. Thanks,
>
> Joe (joemagiera at ameritech dot net)
> joemagiera@ameritech.net
>
>
Joe,
OK, I know you said 'just HTML', but the reality is that HTML is
intended for semantics (paragraph, list, image, etc.) and you are
talking about styling. For styling, there is CSS (Cascading Style
Sheets). It would be to your advantage to learn about it.
Meanwhile, this is a perfect example of a simple solution using CSS.
You want your images to 'float' to the left side of the page, with the
following text wrapped around the image.
Try this.
1. In each <img tag, add:
style="float: left"
This will cause the image to slide toward the left boundary of its
containing block, which in you case is the defined by the <body> element.
2. In each of your paragraphs, add to the <p tag:
style="clear: both"
This will ensure that each paragraph moves down below the lowest part of
the preceding one, whether that is the height of the image or (if the
preceding text was very long) the bottom of the prior text.
I tested these changes in IE 6 and NN 7.1, where they did exactly what
you want. No tables required, and you are using HTML and CSS (the stuff
in the style= attribute) as each was intended.
Chris Beall
Navigation:
[Reply to this message]
|