CSS and images

How to include css and img tag?

[Hasdrubal]

I did read already a lot about images, but it is more for a background what I see.

What do I want to reach?

In the template of the page I am working on (I just started with css), I want to have an image that will have a size of 140 px (width and height).

The place where the image will appear I want to fix in the css template. The img src can be different because I want to use different images for different pages.

Thanks for the push in the right direction.

[Gandalf]

do you mean you want to fix the image into the body of the document or into the flow of the document?

[Hasdrubal]

Can you expalain me the difference?

[Gandalf]

well, you can either have an image attached to the body of the document which can be fixed or scrolling. this image will appear on every page in the same position as a background. Or you can put the image into a container and position it on the page using position or float. using float effectively takes it out of the documents flow, for example if you had 5 images which displayed one after the other from 1 to 5 and you floated number three, numbers four and 5 would move up to fill the space left by 3.

i hope this is clear?

[MatthewHSE]

If I'm understanding properly, you could make an id for the image, use your CSS to position it, and assign that id to the image tag on your page.

Example:

#product /*Or whatever you want to name the id*/
{
position: absolute;
top: 50px;
left: 50px;
}

Then in your html, do this:

<img id="product" src="/image.gif">

That will result in the image being placed 50 pixels from the top and 50 pixels from the left of the screen.

I should also mention that I'm not too familiar with CSS positioning, so it's quite possible that not all of the above is accurate information. However, it should at least provide enough of a start for you to experiment from. CSS positioning can be tricky, so you might want to read up on it a bit.

[Hasdrubal]

Excuses of replying after such long time. Thanks for the information and explanation.

Gandalf : I not want to have it like a background image. The float left is causing some effect in my right comumn.

MatthewHSE : This is probably a solution. I just want that the text will be around the image. In a way you also do when using html and align left or so. vspace and hspace. Now I do have a picture and the text starts under it.
About the effect in my right column I cannot tell you yet because I not tried to do this.

[Gandalf]

hI,

If you want text to flow around an image you will have to set a rule like this:

<p><img src="/images/logo.gif" alt"" width"" height"" style="float: left;">put some paragraph text here and it will be to the right of the image</p>

then if you want the above text by the side of the image and the rest underneath you could use a <br> tag but if you do this instead:

<p><img src="/images/logo.gif" alt"" width"" height"" style="float: left;"></p>

<p style:="clear:left;">some more text here</p>

this will make the second paragraph of text start underneath the image.

hope this helps :)