«

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?

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

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.

"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

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

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.

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.

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.

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