How do you position an image

[Anne]

i Just wanted to know because I have so much trouble. plz help.

[sashi]

Hi there,

there are few methods to do it.. i.e. using external .css file, inline style

Here's the code I used to place the image at that specific plot point:

<IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:50px" SRC="circle.gif">
 

Here's What's Happening

IMG denotes that this will be an image.
STYLE= proclaims what will follow are style commands.
position:absolute; states that the image will go exactly where I say it will. If text or another picture is already there -- tough. This will go right over top of it. That is one of the drawbacks to this positioning stuff.
TOP:35px;LEFT:170px; These are the plot points for the image: 35 pixels down from the top and 170 pixels in from the left.
WIDTH:50px;HEIGHT:50px This is the height and width of the image itself.

Notice the semicolon between each section.. good luck my fren.. :)

[Banfa]

The absolute positioning that sashi sugests should work, however it has some drawbacks, when you use absolute positioning the item postioned comes out of normal document flow. Normal document flow is how the browser positions everything automatically, when the image is no longer in normal document flow the browser will just ignore it as far as deciding where to position everything else.

The effect of this is if the image is embedded in some text, for instance, then when you absolutely position the image the text will just flow behind (or infront) of it, it will not go round it.

Another method of positioning an image (or anything else for that matter) is to float it, you can float it on the left or right like so

[html]<img style="float: left;" src="circle.gif">[/html]

A floated image appears on the left (or right) hand edge but it remains in normal documnet flow so the text it is in would flow round the image.

It is hard to give more advice with more information about what you are trying to achieve.

Finally using the inline style attribute as both sashi and I have done is bad form, you can have your styles in a section at the top of the file or in a separate file (recomended). This however is a CSS question, I would recomend a basic tutorial on CSS which will tell you about this.

http://www.w3schools.com/css/css_howto.asp

[sashi]

Hi Banfa,

thanks buddy.. now am a little clear about absolute positioning.. take care :)

[mouimet]

If you want to be really simple, you can use:

<img src = "picture.jpg" align = right>

img src says what image you will insert and align = right will put it all the way to the right of the screen and text will wrap around it. Like I said, it is a simple way to do it and very limiting on options. Align can also take the values of left, center, top, middle, and bottom. Top, middle, and bottom have a different effect. Try them out and you'll see.

[Relative]

If you use

position:relative;

rather than absolute, it will place the image relative to where you are in the document. This is useful for doing things like embedding an image of the text of an e-mail address so the spam bots can't find what it is.

[drhowarddrfine]

Another post of Christmas past.

[Nevo]

I have tried to get a cookie image to align with the text in my menu, but can't seem to get Align = middle (or any other Align=) to work. Any suggestions?
The site is in danish, but you can se the image and the text in the upper right corner of the page (in the menu to the far right) here Personligpower.dk .

The code used is: <img src="/wp-content/uploads/2016/10/iconbig.png" align=middle style="width:30px;height:25px;">
I did try using: align="middle"

Kind regards
Nevo