I thought it was "impossible" to precisely dictate image position with html commands?

Discussion in 'HTML' started by Doc, Oct 3, 2004.

  1. Doc

    Doc Guest

    I've read in a couple of different places including the archives of this
    forum that html doesn't allow you to precisely dictate the position of an
    image, but I found this command (again in the archives of this forum) that
    apparently allows you to do exactly that.

    <img src="whateveryourfilelocationis" style="position:absolute; left:Xpx;
    top:Xpx">

    What do you call this command? The responder of the particular message where
    I found it didn't expound on it at all, they just left the command as a
    response to a query.

    My introduction to html has been The Complete Dummies Guide To Creating A
    Web Page 5th edition, which I bought brand new about a year ago at a major
    book retailer. The author, Paul McFedries, talks about "pixel shims",
    essentially a blank .gif that you use to manipulate the position of other
    images by defining its size, as the only way to precisely position an image
    within html, but apparently this isn't the case. Is this considered an
    outdated method?
     
    Doc, Oct 3, 2004
    #1
    1. Advertising

  2. Doc

    Steve Pugh Guest

    On Sun, 03 Oct 2004 09:41:32 GMT, "Doc"
    <> wrote:

    >I've read in a couple of different places including the archives of this
    >forum that html doesn't allow you to precisely dictate the position of an
    >image, but I found this command (again in the archives of this forum) that
    >apparently allows you to do exactly that.
    >
    ><img src="whateveryourfilelocationis" style="position:absolute; left:Xpx;
    >top:Xpx">
    >
    >What do you call this command?


    It's not a command. It's a style - and styling is 100% percent
    optional. So the above may precisely position an image in some
    browsers and may not in others. And as many browsers are buggy it may
    precisely position the image in the wrong place.

    It's also not HTML. It's CSS. So the original statement is technically
    true.

    Absolute positioning is a powerfull but dangerous tool. If the user
    has a different window size or font size to you then you may end up
    positioning things off their screen or on top of each other. I
    wouldn't recommend using absolute positioning until you understand all
    the ins and outs of CSS. Often there are more flexible ways of
    reaching the same presentation.

    >My introduction to html has been The Complete Dummies Guide To Creating A
    >Web Page 5th edition, which I bought brand new about a year ago at a major
    >book retailer. The author, Paul McFedries, talks about "pixel shims",
    >essentially a blank .gif that you use to manipulate the position of other
    >images by defining its size, as the only way to precisely position an image
    >within html, but apparently this isn't the case. Is this considered an
    >outdated method?


    Spacer gifs were always just a hack. These days CSS padding and margin
    properties are used to achieve the same with less code.

    Steve
     
    Steve Pugh, Oct 3, 2004
    #2
    1. Advertising

  3. On Sun, 03 Oct 2004 09:41:32 GMT, Doc <>
    wrote:

    > I've read in a couple of different places including the archives of this
    > forum that html doesn't allow you to precisely dictate the position of
    > an image, but I found this command (again in the archives of this forum)
    > that apparently allows you to do exactly that.


    There's no such thing as a HTML command. HTML is mark-up; a description of
    content.

    > <img src="whateveryourfilelocationis"
    > style="position:absolute; left:Xpx; top:Xpx">
    >
    > What do you call this command?


    I call that an IMG element with inline style data. The value of the style
    attribute is CSS, and it is that which positions the image. So, what you
    were told is true: HTML cannot position content but CSS can. To prove
    that, disable CSS in your browser and you'll see that the image appears in
    the normal flow of the document.

    [snip]

    > The author, Paul McFedries, talks about "pixel shims", essentially a
    > blank .gif that you use to manipulate the position of other images by
    > defining its size, as the only way to precisely position an image within
    > html, but apparently this isn't the case. Is this considered an outdated
    > method?


    In my opinion, it's a hack which should have died with presentational
    HTML. However, fixing the position of items is generally a bad idea. It
    prevents the application of fluid design, making (potentially unrealistic)
    demands upon the minimum dimensions of the viewport if not used with care.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Oct 3, 2004
    #3
  4. Re: I thought it was "impossible" to precisely dictate imageposition with html commands?

    "Doc" <> writes:

    > I've read in a couple of different places including the archives of this
    > forum that html doesn't allow you to precisely dictate the position of an
    > image, but I found this command (again in the archives of this forum) that
    > apparently allows you to do exactly that.
    >
    > <img src="whateveryourfilelocationis" style="position:absolute; left:Xpx;
    > top:Xpx">
    >
    > What do you call this command?


    That's an inline CSS declaration applied to an <img> tag using the
    'style' attribute.

    I suggest you read about some CSS basics:
    http://www.google.com/search?q=css introduction

    Cheers
    Matt
     
    Matt N. Jones, Oct 3, 2004
    #4
  5. Doc

    Andy Dingley Guest

    On Sun, 03 Oct 2004 09:41:32 GMT, "Doc"
    <> wrote:

    >I've read in a couple of different places including the archives of this
    >forum that html doesn't allow you to precisely dictate the position of an
    >image,


    True, but with constraints.

    The other posters have explained the technical detail behind the
    contradiction you've found. They're right, but I'd suggest that their
    point is also (and more importantly) irrelevant.

    The crucial thing to understand here is the difference between HTML
    and DTP (possibly the smartest decision TBL got right with the first
    web). DTP (Desk Top Publishing) allows you to precisely design a page
    on a known piece of paper. If you switch it transatlantic and move
    from US Legal to A4 paper, you need to rework the layout or else
    things hang over the edges and don't get printed.

    HTML isn't like this. In HTML, everything fits onto the page and the
    virtual page is a long scrolling view through a physical window that
    depends on your device. If you have a wide screen device, the virtual
    page wraps to be "short and fat", with long lines. If the device
    window is narrow, then the page re-wraps to be long and thin, with
    shorrt lines. For a "world wide" web, it's important to have this
    feature because you do not (and cannot) know the characteristics of
    the user's browser device.

    So in HTML, you can't "precisely dictate the position of an image".
    This is by design, because it's not a good thing to be trying to do.

    With some features of HTML, then you can attempt to do this. The 1x1
    spacer gif was an early attempt. This is thoroughly obsolete as a
    technique (beyond 1997) and you should now _burn_ any book that
    suggests using it. First you should read the apologia by the guy who
    invented the technique - it's on the web and explains why he's sorry
    he did it ! Similar, but slightly less extreme, comments apply to
    the mis-use of tables for layout purposes.

    With the code example you show, you're using CSS and absolute
    positioning to control the position. This is a much better and almost
    stable technique. It's still not a solution though. Yes, you can
    "control the position" now. The problem is that the web is still as
    unpredictable as ever and you cannot know the capacity of the user's
    browser. If you use CSS to position an image 300 pixels from the left
    border, then this is _suggesting_ a position to be used. There's no
    guarantee that the device will support this, either by CSS, or by
    simply not having 300 pixels of width to work with. It may not even
    have any pixels at all, if it's a pure-text mode or speech-only
    browser.

    You can now "precisely dictate the position of an image" perfectly
    well - but the device is under no compulsion to _follow_ your dictat !

    One of the most important questions in web design at the moment is
    "How should your page degrade if a particular feature is unavailable?"
    You must _never_ take the attitude of "This page requires IE5 to view"
    or "This page requires 800x600 screens" - these questions are simply
    outside your control, and will always be so. Don't ask "What do I
    need?", ask instead "What happens if I don't get it?". For a
    well-designed page, your page degrades gracefully when constrained -
    it might not look so good, but it will still _work_.

    Web browser windows are getting smaller these days. Maybe desktop
    screens are getting bigger, both physically and by pixel count, but
    that's causing users to use smaller windows as much as to dedicate all
    of that screen to one web page. There's also a _major_ shift
    happening to portable devices, many of which have very small screens.
    Good CSS-based and device independent design will work on a mobile
    phone _now_, without needing to re-work the pages.
    --
    Smert' spamionam
     
    Andy Dingley, Oct 3, 2004
    #5
  6. Steve Pugh <> wrote:

    > Spacer gifs were always just a hack. These days CSS padding and margin
    > properties are used to achieve the same with less code.


    Due to buggy implementation of CSS padding across browsers (notably IE6),
    spacers are not necessarily a bad idea. Plus, they are more reliable.

    I hate using spacers, though.

    The Doormouse

    --
    The Doormouse cannot be reached by e-mail without her permission.
     
    The Doormouse, Oct 3, 2004
    #6
  7. Andy Dingley <> wrote:

    > So in HTML, you can't "precisely dictate the position of an image".
    > This is by design, because it's not a good thing to be trying to do.
    >
    > With some features of HTML, then you can attempt to do this. The 1x1
    > spacer gif was an early attempt.


    Spacers need not be 1x1 ... you can make them any rectangular size. 1x1,
    1x10, 50x100 ... whatever size you need. :)

    It's a hack, true, but might be useful. For instance, if you wanted to
    change the margin of a drop cap, put in a spacer gif. Need to change the
    margin? Change the spacer. Yes, you could do soemthing better with CSS,
    but the code fiddling is soemtimes more trouble than help. What's the
    difference between two inline images instead of one? CSS is preferred for
    some good reasons, but it is not your only option.

    (A "Drop cap" is the large letter that starts a paragraph, like in a
    magazine).

    > Similar, but slightly less extreme, comments apply to
    > the mis-use of tables for layout purposes.


    Tables are fine for some layout - just not most layout. CSS is great for
    layout, but not all layout. I have seen issues with both.

    > If you use CSS to position an image 300 pixels from the left
    > border, then this is _suggesting_ a position to be used.


    A 300 pixel inline image will make the "suggestion" more of a mandate. At
    worst, content will get bumped down lower on the page, or you might see
    some scrollbars.

    > One of the most important questions in web design at the moment is
    > "How should your page degrade if a particular feature is unavailable?"


    Golden. I totally agree with this.

    > Good CSS-based and device independent design will work on a mobile
    > phone _now_, without needing to re-work the pages.


    It's when you screw up the CSS that things really go wonky. Some of the
    W3C pages, for example, use CSS to their detriment.

    The Doormouse

    --
    The Doormouse cannot be reached by e-mail without her permission.
     
    The Doormouse, Oct 3, 2004
    #7
  8. Doc

    Neal Guest

    On Sun, 03 Oct 2004 09:41:32 GMT, Doc <>
    wrote:

    > My introduction to html has been The Complete Dummies Guide To Creating A
    > Web Page 5th edition, which I bought brand new about a year ago at a
    > major
    > book retailer.


    I'm so sorry. ;)

    Visit http://www.w3schools.com and peek at their HTML and CSS tutorials,
    they're pretty good. Some people like http://www.htmlhelp.com/reference/
    but I'm not as familiar with it.

    The spacer image thing is poor practice. Don't bother with it.
     
    Neal, Oct 3, 2004
    #8
  9. Doc

    Neal Guest

    On Sun, 03 Oct 2004 13:13:23 GMT, The Doormouse <> wrote:

    > Andy Dingley <> wrote:
    >
    >> So in HTML, you can't "precisely dictate the position of an image".
    >> This is by design, because it's not a good thing to be trying to do.
    >>
    >> With some features of HTML, then you can attempt to do this. The 1x1
    >> spacer gif was an early attempt.

    >
    > Spacers need not be 1x1 ... you can make them any rectangular size. 1x1,
    > 1x10, 50x100 ... whatever size you need. :)


    Yes, but all you need is a 1x1 image, the HTML can resize this to whatever
    you need.

    I know you know this, but thought it should be clarified.
     
    Neal, Oct 3, 2004
    #9
  10. Neal <> wrote:

    > Yes, but all you need is a 1x1 image, the HTML can resize this to
    > whatever you need.
    >
    > I know you know this, but thought it should be clarified.


    Yes. I do not trust my browser to do this, however.

    I seem to remember a version of Netscape barfing up an image that I
    wanted it to resize, and haven't trusted it since.

    :)

    The Doormouse

    --
    The Doormouse cannot be reached by e-mail without her permission.
     
    The Doormouse, Oct 4, 2004
    #10
  11. Doc

    altheim Guest

    "Steve Pugh" <> wrote:
    > "Doc" <> wrote:
    >
    > >I've read in a couple of different places including the archives of this
    > >forum that html doesn't allow you to precisely dictate the position of an
    > >image, but I found this command (again in the archives of this forum) that
    > >apparently allows you to do exactly that.
    > >
    > ><img src="whateveryourfilelocationis" style="position:absolute; left:Xpx;
    > >top:Xpx">
    > >
    > >What do you call this command?

    >
    > It's not a command. It's a style - and styling is 100% percent
    > optional. So the above may precisely position an image in some
    > browsers and may not in others. And as many browsers are buggy it may
    > precisely position the image in the wrong place.
    >
    > It's also not HTML. It's CSS. So the original statement is technically
    > true.
    >
    > Absolute positioning is a powerfull but dangerous tool. If the user
    > has a different window size or font size to you then you may end up
    > positioning things off their screen or on top of each other.


    What if you replace absolute positioning (left:Xpx; top:Xpx) with
    percentage positioning, e.g. left:20%; top:20%? Wouldn't that
    force correct alignment in all browsers?

    --
    altheim

    >[...] I wouldn't recommend using absolute positioning until you understand

    all
    > the ins and outs of CSS. Often there are more flexible ways of
    > reaching the same presentation.
    >
    > >My introduction to html has been The Complete Dummies Guide To Creating A
    > >Web Page 5th edition, which I bought brand new about a year ago at a major
    > >book retailer. The author, Paul McFedries, talks about "pixel shims",
    > >essentially a blank .gif that you use to manipulate the position of other
    > >images by defining its size, as the only way to precisely position an image
    > >within html, but apparently this isn't the case. Is this considered an
    > >outdated method?

    >
    > Spacer gifs were always just a hack. These days CSS padding and margin
    > properties are used to achieve the same with less code.
    >
    > Steve
    >
     
    altheim, Oct 4, 2004
    #11
  12. Doc

    Steve Pugh Guest

    On Mon, 4 Oct 2004 09:42:04 +0100, "altheim"
    <> wrote:
    >"Steve Pugh" <> wrote:
    >>
    >> Absolute positioning is a powerfull but dangerous tool. If the user
    >> has a different window size or font size to you then you may end up
    >> positioning things off their screen or on top of each other.

    >
    >What if you replace absolute positioning (left:Xpx; top:Xpx) with
    >percentage positioning, e.g. left:20%; top:20%? Wouldn't that
    >force correct alignment in all browsers?


    No.
    - The user may not have CSS enabled - so that's "all" browsers ruled
    out to start with.
    - Percentage positioning is more likely to trigger browser bugs than
    pixel positioning (browsers tend to have a good idea of what a pixel
    is, not always so with percentages).
    - Authors are often confused by percentages (20% of what?) and when
    combined with the confusion that frequently exists over positioning
    you're asking for trouble.
    - If your content contains fixed sized elemens (images) then you can't
    be sure that a percentage based layout will accomodate them, and
    absolute positioning is less flexible than the regular document flow
    or even floats so the chances of breaking are higher.
    - As you don't know the user's font size you don't know whether the
    content will fit within the areas defined by your percentage
    positioned containers so you may still end up with overlapping
    content.

    Steve
     
    Steve Pugh, Oct 4, 2004
    #12
    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. Peter Sestoft
    Replies:
    0
    Views:
    372
    Peter Sestoft
    Aug 8, 2005
  2. sapta
    Replies:
    2
    Views:
    343
    sapta
    Oct 28, 2006
  3. Sys Ppp
    Replies:
    14
    Views:
    218
    Sys Ppp
    Aug 28, 2009
  4. uNConVeNtiOnAL

    location of prompt box - can you dictate?

    uNConVeNtiOnAL, Sep 10, 2003, in forum: Javascript
    Replies:
    0
    Views:
    85
    uNConVeNtiOnAL
    Sep 10, 2003
  5. Replies:
    5
    Views:
    299
    Michele Dondi
    Jun 30, 2006
Loading...

Share This Page