Need help with aligning text around image.

[tagman2001]

Hi,

I hope this is the right place to post this question and my apologies if it is not. I have looked on this forum to see if anybody posted my predicament but have not located a related thread. I am trying to validate HTML 4.01 Strict and get the following error:

There is no attribute "ALIGN"

(...id=0& type=4& gridnum=6" align="right" vspace="10" hspace="10")

I removed the alignment, vspace, and hspace but the image and text are next to each other with a lot of white space between the bottom of the image and top image.

I can’t figure out how to place the images left or right of the text, with the text at the top of the image using css. I can do it with the above code but it won’t validate. Hoping there is enough information and that someone might point me in the right direction. Any help is appreciated.

Thanks,

tagman2001

[Spiritvn]

hi,

You can use the float property for the image.

if you have a class or a id of the ur content box (i think u have), just add a property for the image. Example: i have a class test

Here is my added CSS code

.test img {
float: left;
}

replace the float value for your image position.

Example for the float left code:
http://htmldog.com/examples/float1.html

you can image that ur image will be replaced the green box ^_^.

Hope you can solve ur prob. Hf

[Veronica]

I'm not sure if this is what you're asking, but if you have text, and want an image to be on the right side of the screen, with the text around it, use float

<img src="whatever.gif" style="float:right;">

[tagman2001]

I would like thank you both for your help.
The code works well. One more question if I may. Would you know what code I would need to add a little white space to the right or left of the image so the text is not against the image? This forum is great. I hope one day I'll be able to help someone once I learn how to code.

Thanks,

tagman2001

[Spiritvn]

I would like thank you both for your help.
The code works well. One more question if I may. Would you know what code I would need to add a little white space to the right or left of the image so the text is not against the image? This forum is great. I hope one day I'll be able to help someone once I learn how to code.

Thanks,

tagman2001

use padding properties;

padding: 5px; // (Top - Right - Bottom - Left all padding 5px)

or

 
padding: 5px 10px 5px 10px; (Top & Bottom padding 5px, Right & Left padding 10px

You can try and will know how it works. And then, hope you can click "Thanks to user ..."

[tagman2001]

Hi,

The float code Veronica post works just find, it seems that the padding code does not seem to work in css.

I might have not explained it correctly. What I am trying to do is replace the [vspace][hspace]

(...vspace="10" hspace="10")

with equivalent css code to validate in HTML 4.01 Strict.

I don’t know how to do that or where to find the code, if some one could help please.

Thanks,

tagman2001

[Veronica]

Padding IS what you want to use.

<img src="whatever.gif" style="float:right; padding :5px 6px 7px 8px;">

As spiritvn explained, the values go in order of top, right, bottom, left. In the above, you'd have a space of 5px on the top, 6 on the right, 7 on the bottom, 8 on the left. Margin is similar, except that a margin defines the white space around an element's border, while padding refers to the white space within the border. But from what you've said, padding is what you want to use.

[tagman2001]

Thanks Veronic and spiritvn,

Margin take care of my problem.

Regards,

tagman2001

[mwinter]

Padding IS what you want to use.

Unlikely. It may be desirable, when floating images or other content, to add a border. However, with applied padding, the border will be rendered flush against the surrounding line boxes. On the practical side, there's also the issue of some, mainly older browsers failing to apply padding to images.

Use margins instead (which is what the OP has done, apparently).

[tagman2001]

Thanks for your reply:

I used margin in my code and it validated.

< img src="abc.gif" style="float: left; margin: 10px;"> text

As I said it validated in HTML4.01 Strict so I trust that it would appear correctly in IE and FF and other browser. I am so new at coding it's not funny, but I keep reading and learning new things everyday. By the way what does OP mean? Hopefully one day I will know most of the coding languages but there is so much to learn.

tagman2001