Aligning text with an image Options

[Cali]

Hi guys,

First time posting here,

So I'm a complete new comer to coding HTML so bare with me, I want to align text (about a paragraphs worth) alongside the right side of an image.

The code so far is as follow: <a title="Name Of Person"><img src="images/Namepic.jpg" WIDTH=134 HEIGHT=128 ALIGN=TOP> </a> TEXT GOES HERE. <BR CLEAR=ALL> <strong>NAME BEING SHOWN</strong> <BR CLEAR=ALL> TITLE OF THE PERSON

With this code so far only 1 line of text goes on the right side of the image, but after it hits the set margin it continues onto the bottom of the image.
Is this something I can fix within this set of code or is a style.CSS issue?

Thanks so much,

N

This post has been edited by Cali: Jul 18 2012, 01:05 PM

[pandy]

Float the image left and your dream will come true.

You CAN do the float bit with old style HTML, but if you don't want the text to wrap under the image you will also need to specify a margin and for that you need CSS. Just as well to do it all with CSS then.

Something like so.

HTML

<div class="foo">
<a title="Name Of Person"><img src="images/Namepic.jpg" width="134" heigth="128"></a>
<p>
TEXT GOES HERE.<br>
<strong>NAME BEING SHOWN</strong><br>
TITLE OF THE PERSON</p>
</div>

And the CSS.

CODE

.foo a    { float: left }
.foo p    [ margin-left: 134px }

The left margin needs to be at least as wide as the image, add more for space. I don't know if a P is the best choice here, but it works. The DIV isn't essential in any way but it makes it possible to use a little smarter sectors and adds some structure. I'm guessing this isn't a single item, but you have more of these images, right? Then doing it this way makes for as little junk code as possible. Just repeat the HTML for each image and the CSS will work it's magic.

[Cali]

Awesome! Thank you much. so simple and it worked great, except I can't seem to change the image size using the 'Width' and 'Height' tags.
Also changing the left margin in the CSS code doesn't seem to create the space between the image and text.

Thanks.

This post has been edited by Cali: Jul 18 2012, 06:18 PM

[pandy]

except I can't seem to change the image size using the 'Width' and 'Height' tags.

Just change the numbers.

Also changing the left margin in the CSS code doesn't seem to create the space between the image and text.

It should, unless you have something else on the page that needs consideration. Can you link to a sample page?

[Cali]

How should I go about doing that?
The CSS file is about 2300 lines...I narrowed down the 'margin-left' and found about 17 of them and tried changing most of them, espcially the one that stated 0px, to no avail.

[pandy]

How should I go about doing that?

Link to the HTML page you are working with.

The CSS file is about 2300 lines...

Then it's with all probability way, way too long...

I narrowed down the 'margin-left' and found about 17 of them and tried changing most of them, espcially the one that stated 0px, to no avail.

Huh? The rule you just added which you should have exactly 1 of...

CODE

.foo p    [ margin-left: 134px }

Change the value 134px to whatever you like it to be.

[Cali]

Ok, so after playing with the code for a while I am fairly certain that the 'foo' tag somehow breaks the ability to have a space between the image and text. I inserted some HTML code designed just for putting a margin between the image and text, without the wrap around function and then added the 'foo' A tag to the CSS file to get the functionality, and it took away the space between the text and image. I've tried many times to change the margin-left for the 'foo' P tag to no avail.

Thanks for your continued help.

[Cali]

Just found a solution.
CSS:

CODE

img.floatLeft {
    float: left;
    margin: 10px;
}

HTML:

CODE

<img src="sunset.gif" class="floatLeft">
<p>The images are contained with...</p>

[pandy]

You have to show what you have. Post the URL.

[pandy]

Oh, I didn't see your second post above. So you wanted the margin to the left of the image? I thought you wanted it between the image and the text.