# Thread: Using Cartesian x,y coordinates.

1. Registered User
Join Date
Apr 2003
Posts
34

## Using Cartesian x,y coordinates.

I have been having trouble getting page elements to be positioned as I want them to be. Especially a form.

I have found a free javascript that places a (function getMouseXY(e) ) on a locally viewable html page. This simple script shows the mouse coordinates in (x,y) values wherever the mouse is moved. Making this js work for a local page to view has been instructive in so far as it can tell me the cartesian x,y allocation of where I want stuff to be placed on another page in the making. So, I am wanting to use x-y coordination to allocate page elements and content. Can anyone provide a tutorial about this?
have not been able to find much and most references to 'positioning' seem to only discuss the use of px, em, align, %,...etc. It seems to me that using cartesian (x,y) coorordination would be easier but why is this not more used? If anyone opens a page with x,y coords used and they have their display settings different from mine used to make the page,...is not the display 'relative' to any settings...so that page content will display in a relative way only in a larger, equal or smaller 'field displayed' ?

Also, if one were to use x,y page coords to allocate for example a TABLE,... what is the method? It should, I think be a simple matter of allocating a box or rectangular area to a given

total page area that is simply "maximum X times y" area,
(and related the user's monitor size and the settings)

right? Do the values (for all lesser x times y areas ...tables, objects and forms, etc ...content that requires allocationing..) designate the table's upper left corner starting locus for the table as width and height designations define the rest. this would be great if it could do this.

__Jim

2. The closest you're going to get for what you want is using CSS positioning. You would use the following two properties:

left: ##px; - specifies the number of pixels from the left side of the page you want the element to appear.

top: ##px; - specifies the number of pixels from the top side of the page.

If you want the element positioned relatively, depending on the users's monitor resolution, then you can use percentages. As far as I know, there is no way to use a Cartesian Coordinate system in the same syntax that you want. The method I mentioned above is the same thing, it's just written differently from (X,Y).

left: /* The X value */
top: /* The Y value */

Then you should position everything absolutely. In CSS:

position: absolute;
left: ##px;
top: ##px;

---

the only problem is, if you're dealing with text, Mac and Netscape users can increase text size regardless of how you specify text sizes in CSS (px, %, relative, points...). You would also need to specify the width and height of each element. Then if someone has increased the text size displayed in their browser by way of their browser settings, text may overlap the edges of the elements you made. Then in CSS:

position: absolute;
left: ##px;
top: ##px;
width: ##px;
height: ##px;
overflow: auto;

---

The last property, overflow, tells the browser what it should do with content that spills over the edges of the element that contains it. In this case, it would cause the browser to display scroll bars if it should need them.

Pretty much everyone that I know who uses CSS to lay out a page, including me, recomends NOT using absolute positioning and depending on specifically sized elements. In web design, there is NO guarantee that text will be a certain size and that a viewer's screen will be a certain width. It's one of the finer miseries of what we do.

You could using pixel perfect positioning, depending on what you are doing on the site. If you are laying out text areas, avoid pixel-perfect positioning like the plague. It always gives more headaches than it cures.

Are you coding in XHTML using CSS to lay the pages out? If so, visit http://www.alistapart.com/. It has a bunch of info on CSS layouts.

3. Registered User
Join Date
Apr 2003
Posts
34

## Why x an Y

Hi toicontien

>It's one of the finer miseries of what we do.
LOL, I have discovered the nature of such misery!
Yesterday, I down-loaded Netscape browser (which I had removed long ago in favor of aol's IE as they seemed to have had conflicts in the past working on the same pc.
They seem to be getting along better so far. And with both to compare...I have had the surprise of finding out the pages(i have made) display differently in the two (main?) different browsers. I'm not really concerned about the other browsers yet,...just making some educational and hobby sites and
no big commercial endeavors until April 39th.

I want to see how using the X-Y coordinates will work and be easier or not according to certain tasks. As I see it my success with this must generally depend upon to what extent a DOM element (?) called a "PIXEL" is a constant object (which I think it should be, yet I need to learn more about all of this as it does implicate things like bit and bytes and binary code per pixel, etc). In the final analysis there is only so many PIXEL that can fill a standard area (inch or whatever) ...unless a pixel is not constant! The Universe is Relativistic but it ant all that Relativistic! So maybe someone can elaborate. Is the PC + DOME "set" dependent upon a constant definition of the pixel object or not? Maybe there is some great fractal mystery.
Any way thanks for the info, and I will try to do some experimenting with the Cartesian coordination using some of what you have elucidated from the abysm of visual acuity...(I have been too busy today watching the angry mob be-head the evil one of Punt) and the other ways to see if I can figure out what i am doing.
__ JHG