How to get image into side of <p> w/o messing up? HELP!

Hey! okay, I am trying to duplicate the effect found in this template: http://www.freecsstemplates.org/preview/advertising ,

The code is:

		<p><img src="images/img04.jpg" alt="" width="122" height="122" class="left" />Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec justo odio, eleifend varius, volutpat venenatis.</p>

Code (markup):

but when I try to duplicate it elsewhere, i just get text on both top and bottom of the image, and not nice and neat to the side of it, so the image is part of the paragraph, but it doesnt mess up the content in the paragraph...

Any pointers?!?!? thanks much for the help!~

 

Just to clarify, you want the image to be to the left of the paragraph right? If so then what you need to do is to specify the class properly in the CSS file. Are you using an external CSS file? If so then put this into your external CSS file:

.left{
float:left;
margin: 0px 10px 0px 0px;
}

Code (markup):

If you are trying to declare the CSS inline (not recommended) then you can replace:

<img src="images/img04.jpg" alt="" width="122" height="122" class="left" />

Code (markup):

with:

<img src="images/img04.jpg" alt="" width="122" height="122" style="float:left;margin: 0px 10px 0px 0px;" />

Code (markup):

You can adjust the margin to reflect how much spacing you want between the image and the text. Note that the 4 values is declaring the TOP, RIGHT, BOTTOM, LEFT margins.


Hodge

 

You are so awesome! I dont really care about if the image is on the right or left at this point, im just learning how to even get an image on the right or left (I am a noobie to the whole CSS/web design realm if it wasnt already explicitly obvious )...

Ok so lets see if I understand this right...

this is what I have...

		<p><img src="images/img04.jpg" alt="" width="122" height="122" class="left" />Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec justo odio, eleifend varius, volutpat venenatis.</p>

Code (markup):

and yes, I am working with an external CSS file... which has these values at present:

img {
	border: none;
}

img.left {
	float: left;
	margin: 3px 20px 0px 0px;
}

Code (markup):

(the one in your example-->)

.left{
float:left;
margin: 0px 10px 0px 0px;
}

Code (markup):

so basically, if I understand this right... the img.left{} defines what happens when you say class="left" ?

Im kind of confused still though as to how to apply that particular style in other <p>'s, or lets say if I wanted to do one where the image was on the right, and one where it was on the left... how would I specify that that particular paragraph should follow the "right" style or "left" style, would that be the class="whatever" value thats doing that?

and then Im assuming I would need to input something in the CSS file that was like:

img {
	border: none;
}

img.right {
	float: right;
	margin: 3px 20px 0px 0px;
}

Code (markup):

then in the given <p> where I wanted that img.right style applied I would put something like:

		<p><img src="images/differentimage" alt="" width="122" height="122" class="right" />CONTENTp>

Code (markup):

???

Does that make any sense !?!? (sorry this is a sorta long post, but I cant tell you how much I appreciate your intelligible answer as opposed to some Ive received on other questions lol)

 

Yeah you're right, you can align the image to the right by using the class as you said. One thing to note is the margin though - notice how it has 4 values? You're basically declaring the margin in a clockwise direction starting from the top. Therefore if you want to float it to the right, I assume you'd want to have the 20px margin to the LEFT not the right, and therefore your margin declaration would be:

margin: 3px 0px 0px 20px;

Code (markup):

That means add a 3px margin to the top of the image, 0px to the right and bottom, and then 20px to the left of the image.

Hodge

 

ahaaaaaaaa its all coming into perspective now, thank you so much for your time!! I cant tell you how much I appreciate it!!