Position image x,y in html

Geir · Nov 4, 2009

Hi,

We have a monitoring page on a specific computer where we need some
differently sized images accurately positioned. Hence there is no
compatibility issues. One computer, one browser.

How do we place imageA.gif at x=500 Y=200? (from the upper left corner
of the screen) At its native pixel size.

Thanks for tips on this

regards

geir

Adrienne Boswell · Nov 4, 2009

Hi,

We have a monitoring page on a specific computer where we need some
differently sized images accurately positioned. Hence there is no
compatibility issues. One computer, one browser.

How do we place imageA.gif at x=500 Y=200? (from the upper left corner
of the screen) At its native pixel size.

Thanks for tips on this

regards

geir

Look at the CSS position property.

Nik Coughlin · Nov 4, 2009

Geir said:
Hi,

We have a monitoring page on a specific computer where we need some
differently sized images accurately positioned. Hence there is no
compatibility issues. One computer, one browser.

How do we place imageA.gif at x=500 Y=200? (from the upper left corner of
the screen) At its native pixel size.

Thanks for tips on this

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Position imageA</title>
<style type="text/css">
.imageA {
position: absolute;
left: 500px;
top: 200px;
}
</style>
</head>
<body>
<img src="imageA.gif" class="imageA" alt="meaningful alt text">
</body>
</html>

Nik Coughlin · Nov 5, 2009

Ben C said:
Yes, although this is invalid-- not supposed to have an IMG just inside
BODY like that. Put a DIV around it.

Nope, perfectly valid, look at the doctype. But your advice is good for the
OP who is probably not authoring as HTML 5

Nik Coughlin · Nov 5, 2009

Nik Coughlin said:
Nope, perfectly valid, look at the doctype. But your advice is good for
the OP who is probably not authoring as HTML 5

In fact, this is valid HTML5 (provided that the server is sending character
encoding or the file has a Unicode BOM):

<!DOCTYPE HTML>
<title>Position imageA</title>
<style type="text/css">
.imageA {
position: absolute;
left: 500px;
top: 200px;
}
</style>
<img src="bigger.png" class="imageA" alt="meantingful alt text">

Travis Newbury · Nov 5, 2009

...Hence there is no
compatibility issues. One computer, one browser.

How do we place imageA.gif at x=500 Y=200? (from the upper left corner
of the screen) At its native pixel size.

Does anyone "really" believe this is running this on a single system
with a single browser? Come on... They just know everyone will give
them crap about trying to make it look exactly like they want if they
did not put that in there...

That said, I think it is perfectly all right to have such a page and
they should look at CSS absolute positioning....

Beauregard T. Shagnasty · Nov 6, 2009

Ben said:
I was curious about the doctype. So that's an HTML 5 doctype?

Sending Nik's sample to the validator produces this:

" Using experimental feature: HTML5 Conformance Checker.

The validator checked your document with an experimental feature: HTML5
Conformance Checker. This feature has been made available for your
convenience, but be aware that it may be unreliable, or not perfectly up
to date with the latest development of some cutting-edge technologies."

Personally, I wouldn't use HTML5 until it is listed here:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Image overlay and comparison code error.	2	Jul 1, 2021
Where is the current X & Y stored?	2	Jul 27, 2004
Weird Behavior with Rays in C and OpenGL	4	Feb 13, 2024
x, y coordinates of the browser top left corner in Interenet Explorer.	1	May 4, 2007
changeimage() also changes image position	2	Jan 29, 2008
Trying to find image position in IE.	7	Jul 15, 2008
Help with my responsive home page	2	Dec 14, 2022
image lib supports arbitrary canvas coordinate	0	Jun 25, 2012

Position image x,y in html

Geir

Adrienne Boswell

Nik Coughlin

Nik Coughlin

Nik Coughlin

Travis Newbury

Beauregard T. Shagnasty

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads