M
mike
I'm trying to create a script that can position icons on top of an
image automatically. Doing that is, of course, the easy part, the hard
part is the positioning because I seem to be missing something about
containing blocks.
Basically, I've tried doing it two ways. The first was to use
"relative" positioning. So I'd make something like:
..item1 { position: relative; left: 500px; top: 500px; }
..item2 { position: relative; left: 500px; top: 500px; }
<body>
<div id="CB">
<img class="item1" .../>
<img class="item2" .../>
</div>
</body>
In this case, the items are positioned relative to the block "CB" like
I'd expect. However, the positioning is weird. Item1 appears where
I'd expect it to: (x,y) (500,500) But item2 doesn't make sense to me.
It's not at (500,500) or (1000,1000), it's at (516, 500). I don't know
where it got the 16 extra pixels, or why it only skews in the x
direction.
So I said, Okay, let's try absolute positioning, since all the
documentation in CSS2 says it'll be positioned absolutely from the
containing block.
-> http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme
So I use the same code but change both "position: relative" to
"position: absolute". As expected, the images line up perfectly.
Great!
So then I change the code just a bit so that it's:
<body>
<h1>Some text</h1>
<div id="CB">
<img class="item1" .../>
<img class="item2" .../>
</div>
</body>
And now the images aren't in the same place. That is, they're in the
exact same place as they were on the page, not where they were in the
DIV tag, which makes me think I've failed to convince IE that this is a
containing block?
I'm hoping it's clear what I want to do? I have a background image in
the DIV tag (a map) and am using images to put waypoints on the map. I
want to be able to store their (x,y) in a database and be able to use
them without worrying about the rest of the page structure.
Any suggestions for how to do this, either by fixing the methods above
or taking a new approach?
Thanks for any help that can be offered.
Cheers,
Mike
image automatically. Doing that is, of course, the easy part, the hard
part is the positioning because I seem to be missing something about
containing blocks.
Basically, I've tried doing it two ways. The first was to use
"relative" positioning. So I'd make something like:
..item1 { position: relative; left: 500px; top: 500px; }
..item2 { position: relative; left: 500px; top: 500px; }
<body>
<div id="CB">
<img class="item1" .../>
<img class="item2" .../>
</div>
</body>
In this case, the items are positioned relative to the block "CB" like
I'd expect. However, the positioning is weird. Item1 appears where
I'd expect it to: (x,y) (500,500) But item2 doesn't make sense to me.
It's not at (500,500) or (1000,1000), it's at (516, 500). I don't know
where it got the 16 extra pixels, or why it only skews in the x
direction.
So I said, Okay, let's try absolute positioning, since all the
documentation in CSS2 says it'll be positioned absolutely from the
containing block.
-> http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme
So I use the same code but change both "position: relative" to
"position: absolute". As expected, the images line up perfectly.
Great!
So then I change the code just a bit so that it's:
<body>
<h1>Some text</h1>
<div id="CB">
<img class="item1" .../>
<img class="item2" .../>
</div>
</body>
And now the images aren't in the same place. That is, they're in the
exact same place as they were on the page, not where they were in the
DIV tag, which makes me think I've failed to convince IE that this is a
containing block?
I'm hoping it's clear what I want to do? I have a background image in
the DIV tag (a map) and am using images to put waypoints on the map. I
want to be able to store their (x,y) in a database and be able to use
them without worrying about the rest of the page structure.
Any suggestions for how to do this, either by fixing the methods above
or taking a new approach?
Thanks for any help that can be offered.
Cheers,
Mike