Jump to content
xisto Community
Sign in to follow this  
khalilov

Relative Position (css)

Recommended Posts

I am making a coordinate system

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
<p class="map"><?php$x=$_GET['x'];$y=$_GET['y'];$x*=74;$y*=57;echo "<div style='position:absolute;top:".$y."px;left:".$x."px;'><img src='file:\\C:\wamp\www\Game\pic\mark.jpg'></div>";?></p>

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

$x+=210;$y-=270;
So that they are almost at the begining. Where is 0px,0px of map?

Share this post


Link to post
Share on other sites

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 :rolleyes:

 

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

 

http://forums.xisto.com/no_longer_exists/

Edited by Quatrux (see edit history)

Share this post


Link to post
Share on other sites

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

$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 :rolleyes:

Share this post


Link to post
Share on other sites

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

<link rel="stylesheet" type="text/css" href="map.css" /><p class="map"><?php$x=$_GET['x'];$y=$_GET['y'];$x*=74;$y*=57;echo "<img style='position:relative;top:".$y."px;left:".$x."px;'src='file:\\C:\wamp\www\Game\pic\mark.jpg'>";?></p>
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.