Position image x,y in html

Discussion in 'HTML' started by Geir, Nov 4, 2009.

  1. Geir

    Geir Guest

    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
     
    Geir, Nov 4, 2009
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed Geir <> writing
    in news::

    > 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.


    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Nov 4, 2009
    #2
    1. Advertising

  3. Geir

    Nik Coughlin Guest

    "Geir" <> wrote in message
    news:...
    > 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 4, 2009
    #3
  4. Geir

    Nik Coughlin Guest

    "Ben C" <> wrote in message
    news:...
    > On 2009-11-04, Nik Coughlin <> wrote:
    >> "Geir" <> wrote in message
    >> news:...
    >>> 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>

    >
    > 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
    #4
  5. Geir

    Nik Coughlin Guest

    "Nik Coughlin" <> wrote in message
    news:hcvl58$446$-september.org...
    > "Ben C" <> wrote in message
    > news:...
    >> On 2009-11-04, Nik Coughlin <> wrote:
    >>>
    >>><!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>

    >>
    >> 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 :)


    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">
     
    Nik Coughlin, Nov 5, 2009
    #5
  6. On Nov 4, 9:20 am, Geir <> wrote:
    > ...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....
     
    Travis Newbury, Nov 5, 2009
    #6
  7. Ben C wrote:

    > On 2009-11-05, Nik Coughlin <> wrote:
    >>>> <!DOCTYPE HTML>
    >>>> <html> ...
    >>>
    >>> 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 :)

    >
    > 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

    --
    -bts
    -but that's just me...
     
    Beauregard T. Shagnasty, Nov 6, 2009
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luqman
    Replies:
    1
    Views:
    678
    Luqman
    Feb 7, 2006
  2. Doc
    Replies:
    11
    Views:
    686
    Steve Pugh
    Oct 4, 2004
  3. Lukasz Indyk
    Replies:
    4
    Views:
    436
    Diez B. Roggisch
    May 17, 2004
  4. =?Utf-8?B?RGFsZQ==?=

    HTML 101 Position image relative to GridView row

    =?Utf-8?B?RGFsZQ==?=, Oct 21, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    489
    =?Utf-8?B?RGFsZQ==?=
    Oct 22, 2006
  5. Replies:
    3
    Views:
    199
Loading...

Share This Page