Relative Position (css)

khalilov

Dec 12 2008, 07:33 PM

I am making a coordinate system

CODE

p.map
{ position:absolute;
left:20%;
top:20%;
width:70%;
height:70%;
background-image: url(grass.jpg);
background-repeat: repeat; }

An object(another image) appears in a certain position depending on GET vars

CODE

The position of the pic comes outside the map, whats the code so that that style coordination is relative to map, meaning 0px,0px are at top left of map box.

Comment/Reply (w/o sign-up)

pyost

Dec 12 2008, 08:44 PM

When using absolute positioning (what you used for p.map), you are giving an element the exact position where it should be, relative to the whole page. If you, however, want to position an element relative to another element, the latter has to have position:relative as an attribute.

So, in your case, p.map would have position:relative (unfortunately, you would have to deal with positioning that element differently, I think), and the rest would stay the same.

Comment/Reply (w/o sign-up)

khalilov

Dec 13 2008, 08:33 AM

I set the positioning to relative on both map and div, its different now. However the 0,0 are not at the top left of map box, i a had to

CODE

$x+=210;
$y-=270;

So that they are almost at the begining. Where is 0px,0px of map?

Comment/Reply (w/o sign-up)

Quatrux

Dec 13 2008, 11:32 AM

I don't want to be wrong, but for example 0,0 will be in a position you are currently using top left, for example you are in the middle of a page and before you, you've got lots of elements, so 0,0 will be the currently most left position you can get and it's not like you always are linking to the top left of the page, you're linking to the top left of the current element and when you're using -1 or -20 coordinates, you overflow, I mean you get outside that element in the direction you're using.. I think it works like that

here is some source for it, also it has a testing tool, try it yourself tools:

http://www.w3schools.com/Css/pr_class_position.asp

Comment/Reply (w/o sign-up)

pyost

Dec 13 2008, 02:57 PM

QUOTE(khalilov @ Dec 13 2008, 09:33 AM)

I set the positioning to relative on both map and div, its different now. However the 0,0 are not at the top left of map box, i a had to

CODE

$x+=210;
$y-=270;

So that they are almost at the begining. Where is 0px,0px of map?

p.map should use relative, and the div should use absolute. When you use top:0; left:0, the top left corner of the div will be placed in the top left corner of the map - that's how it should work. If it isn't, then something else is the problem. Try posting the whole code

Comment/Reply (w/o sign-up)

khalilov

Dec 13 2008, 03:04 PM

It didn't work =), but this did:

CODE

Turns out the <div></div> were messing things up. By putting the image directly inside <map> tags its 0,0 were set to top left of map. Then by using relative positioning it works. Thanks guys, especially for the relative position thing, didn't know it =). Alot of recoding to do O.o

Comment/Reply (w/o sign-up)