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

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 ..." :D

[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

[mwinter]

As I said it validated in HTML4.01 Strict so I trust that it would appear correctly in IE and FF and other browser.

As much as I would like for validity to confer correct rendering behaviour, that isn't always so. However, validity does simplify things, so it's still something to aim towards.



I am so new at coding it's not funny, but I keep reading and learning new things everyday.

Everyone begins somewhere. Welcome to the fold. :)



By the way what does OP mean?

Original poster, or original post. In other words, you or your post that started this thread. Context usually indicates which applies.

[tagman2001]

As much as I would like for validity to confer correct rendering behavior, that isn't always so. However, validity does simplify things, so it's still something to aim towards.
It seems to me that the best I can do is to design for the majority of the browsers (i.e., IE, FF, OPERA) is that a reasonable assumption?

Also being that I am trying to learn coding with the help of this forum and different books (i.e., HTML, using CSS) which the are the only ones I have read so far. I also have books on XHTML, JAVA SCRIPT, PHP, MYSLQ, XML I have yet to open. Is there any progression that you might suggest I read first?

Thanks,

tagman2001

[mwinter]

It seems to me that the best I can do is to design for the majority of the browsers (i.e., IE, FF, OPERA) is that a reasonable assumption?

If you aim to conform to the various standards, you'll usually meet that target as well as supporting future software.



Also being that I am trying to learn coding with the help of this forum and different books (i.e., HTML, using CSS) which the are the only ones I have read so far. I also have books on XHTML, JAVA SCRIPT, PHP, MYSLQ, XML I have yet to open. Is there any progression that you might suggest I read first?

Leave the XHTML book, at least for the time being. Serving XHTML on the Web isn't advisable unless in exceptional circumstances. Certainly before you read that, you should understand XML fully. Of the others, it depends on what you want to do. PHP and other server-side technologies will be of interest if you want to dynamically generate responses, whether they be documents, or images, and so forth. Learning about database operations isn't much use unless you have a server-side technology to work with, but the two tend to be quite intimately related for larger projects. Client-side scripting is useful for adding interactivity to a document, as well as working together with server-side code.