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

[Doc]

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?

 

[Steve Pugh]

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

 

[Michael Winter]

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

 

[Matt N. Jones]

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

 

[Andy Dingley]

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.

 

[The Doormouse]

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]

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

 

[Neal]

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]

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.

 

[The Doormouse]

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

 

[altheim]

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

 

[Steve Pugh]

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