473,405 Members | 2,300 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

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?
Jul 23 '05 #1
7 7968
On Sun, 03 Oct 2004 09:41:32 GMT, "Doc"
<do*********@REMOVEhotmail.com> 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

Jul 23 '05 #2
On Sun, 03 Oct 2004 09:41:32 GMT, Doc <do*********@REMOVEhotmail.com>
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.
Jul 23 '05 #3
On Sun, 03 Oct 2004 09:41:32 GMT, "Doc"
<do*********@REMOVEhotmail.com> 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
Jul 23 '05 #4
Andy Dingley <di*****@codesmiths.com> 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.
Jul 23 '05 #5
On Sun, 03 Oct 2004 09:41:32 GMT, Doc <do*********@REMOVEhotmail.com>
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.
Jul 23 '05 #6
On Sun, 03 Oct 2004 13:13:23 GMT, The Doormouse <do*******@att.net> wrote:
Andy Dingley <di*****@codesmiths.com> 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.
Jul 23 '05 #7
Neal <ne*****@yahoo.com> 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.
Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

38
by: Haines Brown | last post by:
I'm having trouble finding the character entity for the French abbreviation for "number" (capital N followed by a small supercript o, period). My references are not listing it. Where would I...
0
by: Karl Smith | last post by:
Headless <invalid_address@dna.ie> wrote in reply to Christoph Paeper <crissov@gmx.net>: > Semantically <span>this</span> is 100% identical to: > Semantically <div>this</div> is 100% identical...
41
by: AngleWyrm | last post by:
I have created a new container class, called the hat. It provides random selection of user objects, both with and without replacement, with non-uniform probabilities. Uniform probabilities are a...
15
by: Gérard Talbot | last post by:
Hello all, I'd like to know and understand the difference between, say, <img src="/ImageFilename.png" width="123" height="456" alt=""> and <img src="/ImageFilename.png" style="width:...
4
by: Guadala Harry | last post by:
Is there any way for one Session to remove and update objects in another Session? I seriously doubt it, but thought I'd ask. Here's why: I have some data that is unique per user (or per session -...
1
by: Rune Jacobsen | last post by:
Hi, I've been trying to figure this one out, but my experience just doesn't have what it takes... :| I am writing an application that reads an XML file and displays the contents in various...
26
by: Jake Barnes | last post by:
I did a search on the newsgroup comp.lang.javascript. I was searching for "how to play a sound with Javascript". I'm somewhat suprised that the majority of entries are from the 1990s, and there are...
24
by: Jeremy J Starcher | last post by:
While reading c.l.j, I've noticed that some people prefer and indeed even recommend the use of "window.alert()" over "alert()". I can't find any technical reason to make this distinction, and...
12
Frinavale
by: Frinavale | last post by:
I think I'm trying to do something impossible. I have a <div> element with a overflow style set to "scroll". In other words my <div> element allows the user to scroll the content within it. ...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.