Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS positioning (IE?)

Reply
Thread Tools

CSS positioning (IE?)

 
 
mike@hitori.org
Guest
Posts: n/a
 
      06-28-2006
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/visure...tioning-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

 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      06-28-2006
To further the education of mankind, http://www.velocityreviews.com/forums/(E-Mail Removed) vouchsafed:

> 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.


You need to relatively position the parent container.

--
Neredbojias
Infinity has its limits.
 
Reply With Quote
 
 
 
 
Toby Inkster
Guest
Posts: n/a
 
      06-28-2006
mike wrote:

> <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.


No they're not. They're positioned RELATIVE TO WHERE THEY WOULD NORMALLY
APPEAR!

> Item1 appears where I'd expect it to: (x,y) (500,500)


Yes. Its normal position would be at (0,0), so with a relative position of
(500,500) it appears at (0+500,0+500) = (500,500).

> But item2 doesn't make sense to me. It's not at (500,500) or
> (1000,1000), it's at (516, 500).


Item2's normal position (if there was no relative positioning going on)
would be (16,0), so it appears at (16+500,0+500) = (516,500).

> So I said, Okay, let's try absolute positioning,


Yes -- absolute positioning is what you *should* be using here.

> since all the documentation in CSS2 says it'll be positioned absolutely
> from the containing block.


Then you're reading the CSS 2 documentation wrong!

Absolutely positioned elements are positioned absolutely NOT FROM THE
CONTAINING BLOCK, but from the NEAREST CONTAINING POSITIONED ELEMENT.

That is, in:

<div id="e1">
<div id="e2" style="position:relative">
<div id="e3">
<div id="e4" style="position:absolute">
foo
</div>
</div>
</div>
</div>

.... the element 'e4' is positioned not from 'e3', but from 'e2' because
'e2' is the nearest containing *POSITIONED* element!

> <body>
> <h1>Some text</h1>
> <div id="CB">
> <img class="item1" .../>
> <img class="item2" .../>
> </div>
> </body>


You want to add the following to your stylesheet:

#CB{position:relative}

> Thanks for any help that can be offered.


Read the CSS 2 recommendation again -- the parts on positioning especially.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Datalist and CSS positioning Eric ASP .Net 1 09-14-2005 03:38 PM
OT ...CSS positioning ASP .Net 1 04-07-2004 12:58 PM
Re: CSS positioning help - Mozilla brucie HTML 8 06-29-2003 05:39 PM
Re: CSS positioning help - Mozilla David Graham HTML 1 06-28-2003 05:15 PM
Re: css positioning vs. tables PeterMcC HTML 0 06-23-2003 04:45 PM



Advertisments