I am working on building a skin for a media player, I have the images done, well actually it is one image at this time, but that is an easy fix. Here is the question how does the positioning work? are the sub images measured from the edges or from the corners or from just one corner, or is it the center of the images?
I am sure that when one builds a web page it is basically the same for the positioning of elements, contained in the page.
Any ideas?

What kind of positioning? What's a "sub image"?

See http://www.w3.org/TR/CSS2/visuren.html#propdef-position .

Oh, now I notice you said relative positioning in the subject line. When you position something relative, the offset is relative where the element would have been had it not been positioned.

I will try to explain with a graphic, Please understand this is not finished yet, definitely a work in progress.


Think of this as a web page with buttons which are in fact images, as I understand it these images can be associated with code to do certain things. As you can see the position of each sub image in important so things appear where they are supposed to.
This player "skin" is controlled by XML, and the "buttons" do very specific things when "pressed".
As such this should be no different than a webpage with buttons on it.
I just need a better understanding of how things are positioned.

So read the page I posted a link to.

If you haven't worked with positioning before, you probably need something more elaborate than that. Try googling "CSS positioning tutorial". Positioning isn't necessarily the best solution either, even if you probably will need at least some.

Can't tell you how to do it from that image. If you have a page showing what you have so far, let's see that.

I think I am just going to wing it, as far as I can tell, there are no css requirements for doing a skin, just plain everyday XML.
But I do want to point out that the play button on my image is x pixels from teh edge of teh player as well as x+n pixels from the edge of the page.
I guess my main question is /was, if you put an image on a page, it will be x pixels from the edge of the page, but what part of it, is referenced, the center, the left edge, the top left corner. the right edge? which is most common?

What did you use to place it x pixels from the edge? As said, 'position: relative' doesn't do that. If you used 'position: absolute' the offset is explained just below the section I linked to. It's edge to edge.

I don't think anyone here knows about whatever system you are specifying your "skin" in. So you have to go and find the specification for _that_ system. It may have nothing at all to do with web pages _as such_, and you could waste enormous amounts of time being led astray by people who assume you are doing something completely different from your actual task.

Guys there is no point in dragging this on, I try elsewhere to find the simple most answer to my question.

Believe it or not, but we want to help if we can.
But we need to know how this positioning is done. CSS, XLS or what? Have a sample?

Sorry for arguing in your thread.

Ok my bad I posted in the wrong forum, I did not realize that until now, I could have sworn I posted in the markup forum, sometimes my computer jumps instead of actually clicking a link.
I had been struggling with the positioning issue, all I needed was a quick reference as to where the image was in relation to the bigger image (hence the common "this item is relative to that item" thinking) relatively speaking (sorry).
at any rate I have now given up on my quest mainly because I can't find a simple answer to a simple question.
Thanks for your attempts to help me understand.

Is this media player meant to be loaded in a browser? If so it's probably better to use HTML rather than client-side XML, since I suspect the latter is not as well supported by browsers (it seems you can use client-side XML with CSS in newer browsers as described on e.g. http://www.w3schools.com/xml/xml_display.asp but I've just tested it briefly).

To arrange images like the OP wants to do, you can place the large image in an element (e.g. DIV), style that element with CSS "position: relative" and then use CSS "position absolute" for the small images.

BTW it seems the topic was first posted in the HTML/XHTML/XML forum and later moved by a moderator.

It wasn't me. I thought it was you.



Don't give up. The problem is that we don't understand what you are doing. To begin with, is the skin for a program you run on your comnputer or for some player thingie in a web page?