472,143 Members | 1,420 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,143 software developers and data experts.

How do you position an image

i Just wanted to know because I have so much trouble. plz help.
Jul 11 '06 #1
7 419858
1,754 Expert 1GB
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:
Expand|Select|Wrap|Line Numbers
  1. <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.. :)
Jul 11 '06 #2
9,065 Expert Mod 8TB
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.

Jul 12 '06 #3
1,754 Expert 1GB
Hi Banfa,

thanks buddy.. now am a little clear about absolute positioning.. take care :)
Jul 12 '06 #4
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.
Jul 18 '06 #5
If you use


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.
Oct 8 '10 #6
7,435 Expert 4TB
Another post of Christmas past.
Oct 9 '10 #7
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
Oct 9 '16 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Lam | last post: by
3 posts views Thread by edouard.lauer | last post: by
7 posts views Thread by Dan | last post: by
6 posts views Thread by Seth Illgard | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.