Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #22740 > unrolled thread

Set image to the correct position over another image

Back to article view | Back to comp.lang.javascript

Contents

  Set image to the correct position over another image Kanobi <nome.geirr@gmail.com> - 2014-01-21 13:36 -0800
    Re: Set image to the correct position over another image "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-21 22:54 +0100
      Re: Set image to the correct position over another image Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-21 23:23 +0100
        Re: Set image to the correct position over another image Tim Streater <timstreater@greenbee.net> - 2014-01-21 22:48 +0000
          Re: Set image to the correct position over another image Andrew Poulos <ap_prog@hotmail.com> - 2014-01-22 11:23 +1100
      Re: Set image to the correct position over another image nome.geirr@gmail.com - 2014-01-22 08:13 -0800
      Re: Set image to the correct position over another image Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2014-01-22 22:06 +0100
      Re: Set image to the correct position over another image "se" <se@no-one.here> - 2014-01-24 00:17 +0100
        Re: Set image to the correct position over another image "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-24 10:29 +0100
          Re: Set image to the correct position over another image Osmo Saarikumpu <osmo@weppipakki.com> - 2014-01-26 14:11 +0200
    Re: Set image to the correct position over another image Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-21 23:17 +0100
    Re: Set image to the correct position over another image Danny <dann90038@gmail.com> - 2014-01-22 12:32 -0800
      Re: Set image to the correct position over another image nome.geirr@gmail.com - 2014-01-22 13:08 -0800
        Re: Set image to the correct position over another image Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-23 00:41 +0100
    Re: Set image to the correct position over another image lingmaaki@gmail.com - 2014-04-21 00:04 -0700
      Re: Set image to the correct position over another image Ed Jay <edMbj@aes-intl.com> - 2014-04-21 07:07 -0700

#22740 — Set image to the correct position over another image

I have a map image and want to position a cross over it.

Both are currently in a div container with position set to static.
Each image is then inside a div.

Everything works fine if I set the position for both to absolute. However I want them to inherit the position of the container. When I set the position of the image divs to relative the map displays fine, but the cross is positioned outside the map and to the right.

Any ideas?

Here is a cutout of the code:
<div id="marked">
<div id="container" style="position: static; white-space: nowrap;">
	<div id="map" style="position: relative; left: 0px; top: 0px; z-index:1;"><img src="anatomi/netter-neruo2002/saggitalbrain-insitu.jpg"></div>
	<div id="cross" style="position: relative; left: 302px; top: 155px; z-index:2;"><img src="imageOverlay_files/dots/d9.png"></div>
	</div>
</div>

[toc] | [next] | [standalone]

#22741

Kanobi <nome.geirr@gmail.com> wrote on 21 jan 2014 in
comp.lang.javascript: 

> I have a map image and want to position a cross over it.
> 
> Both are currently in a div container with position set to static.
> Each image is then inside a div.
> 
> Everything works fine if I set the position for both to absolute.
> However I want them to inherit the position of the container. When I set
> the position of the image divs to relative the map displays fine, but
> the cross is positioned outside the map and to the right. 
> 
> Any ideas?
> 
> Here is a cutout of the code:
> <div id="marked">
> <div id="container" style="position: static; white-space: nowrap;">
>      <div id="map" style="position: relative; left: 0px; top: 0px;
>      z-index:1;"><img
>      src="anatomi/netter-neruo2002/saggitalbrain-insitu.jpg"></div> 
>      <div id="cross" style="position: relative; left: 302px; top: 155px;
>      z-index:2;"><img src="imageOverlay_files/dots/d9.png"></div> 
>      </div>
> </div>

You should read the css position specs again. There is no top and left on a 
relative position, a relative position is only the reference where absolute 
opsitioned elements are contained in and are relative to. Position static is 
just the default for a webpage, there are very few reasons to use that.

Try:

<div style="position:relative;">
  <img src="cross.jpg" 
      style="position:absolute;width:300px;height:200px;z-index:4;">
  <img src="original.jpg" 
      style="position:absolute;width:300px;height:200px;z-index:3;">
</div>



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#22744

Evertjan. wrote:

> Kanobi <nome.geirr@gmail.com> wrote on 21 jan 2014 in
> comp.lang.javascript:

It's attribution _line_, not attribution novel.
 
>> I have a map image and want to position a cross over it.
>> 
>> Both are currently in a div container with position set to static.
>> Each image is then inside a div.
>> 
>> Everything works fine if I set the position for both to absolute.
>> However I want them to inherit the position of the container. When I set
>> the position of the image divs to relative the map displays fine, but
>> the cross is positioned outside the map and to the right.
>> 
>> Any ideas?
>> 
>> Here is a cutout of the code:
>> <div id="marked">
>> <div id="container" style="position: static; white-space: nowrap;">
>>      <div id="map" style="position: relative; left: 0px; top: 0px;
>>      z-index:1;"><img
>>      src="anatomi/netter-neruo2002/saggitalbrain-insitu.jpg"></div>
>>      <div id="cross" style="position: relative; left: 302px; top: 155px;
>>      z-index:2;"><img src="imageOverlay_files/dots/d9.png"></div>
>>      </div>
>> </div>
> 
> You should read the css position specs again.

You do that.

> There is no top and left on a relative position, a relative position is
> only the reference where absolute opsitioned elements are contained in and
> are relative to.

Utter nonsense.

> Position static is just the default for a webpage, there are very few
> reasons to use that.
> 
> Try:
> 
> <div style="position:relative;">
>   <img src="cross.jpg"
>       style="position:absolute;width:300px;height:200px;z-index:4;">
>   <img src="original.jpg"
>       style="position:absolute;width:300px;height:200px;z-index:3;">
> </div>

Not even remotely equivalent to the original.

Your header fields are still borken.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#22746

In article <11692473.Uo28B8IpBl@PointedEars.de>, Thomas 'PointedEars'
Lahn <PointedEars@web.de> wrote:

> Your header fields are still borken.

1) Not your business

2) You still can't spell

-- 
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted"  --  Bill of Rights 1689

[toc] | [prev] | [next] | [standalone]

#22747

On 22/01/2014 9:48 AM, Tim Streater wrote:
> In article <11692473.Uo28B8IpBl@PointedEars.de>, Thomas 'PointedEars'
> Lahn <PointedEars@web.de> wrote:
>
>> Your header fields are still borken.
>
> 1) Not your business

What's PE's business is not yours either.

> 2) You still can't spell

Yes he can:
<http://www.urbandictionary.com/define.php?term=borken>

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#22749

Thank you for your solution. But I want the map positioned center on the page and the cross in the correct position over that. Now it's positioned left and nothing seems to affect that.

kl. 22:54:01 UTC+1 tirsdag 21. januar 2014 skrev Evertjan. følgende:
> Kanobi <> wrote on 21 jan 2014 in
> 
> comp.lang.javascript: 
> 
> 
> 
> > I have a map image and want to position a cross over it.
> 
> > 
> 
> > Both are currently in a div container with position set to static.
> 
> > Each image is then inside a div.
> 
> > 
> 
> > Everything works fine if I set the position for both to absolute.
> 
> > However I want them to inherit the position of the container. When I set
> 
> > the position of the image divs to relative the map displays fine, but
> 
> > the cross is positioned outside the map and to the right. 
> 
> > 
> 
> > Any ideas?
> 
> > 
> 
> > Here is a cutout of the code:
> 
> > <div id="marked">
> 
> > <div id="container" style="position: static; white-space: nowrap;">
> 
> >      <div id="map" style="position: relative; left: 0px; top: 0px;
> 
> >      z-index:1;"><img
> 
> >      src="anatomi/netter-neruo2002/saggitalbrain-insitu.jpg"></div> 
> 
> >      <div id="cross" style="position: relative; left: 302px; top: 155px;
> 
> >      z-index:2;"><img src="imageOverlay_files/dots/d9.png"></div> 
> 
> >      </div>
> 
> > </div>
> 
> 
> 
> You should read the css position specs again. There is no top and left on a 
> 
> relative position, a relative position is only the reference where absolute 
> 
> opsitioned elements are contained in and are relative to. Position static is 
> 
> just the default for a webpage, there are very few reasons to use that.
> 
> 
> 
> Try:
> 
> 
> 
> <div style="position:relative;">
> 
>   <img src="cross.jpg" 
> 
>       style="position:absolute;width:300px;height:200px;z-index:4;">
> 
>   <img src="original.jpg" 
> 
>       style="position:absolute;width:300px;height:200px;z-index:3;">
> 
> </div>
> 
> 
> 
> 
> 
> 
> 
> -- 
> 
> Evertjan.
> 
> The Netherlands.
> 
> (Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#22751

"Evertjan." <exxjxw.hannivoort@inter.nl.net> writes:

> You should read the css position specs again. There is no top and left on a 
> relative position, a relative position is only the reference where absolute 
> opsitioned elements are contained in and are relative to.

Something went horribly wrong here, let's fix that:

|>> There is no top and left on a relative position, a relative position
|>> is only the reference where absolute opsitioned elements are
|>> contained in and are relative to.
|>
|> You should read the css position specs again.

There, now it makes sense.

[toc] | [prev] | [next] | [standalone]

#22768

"Evertjan." <exxjxw.hannivoort@inter.nl.net> skrev i meddelelsen 
news:XnsA2BCE8F4BE978eejj99@194.109.133.133...
> Kanobi <nome.geirr@gmail.com> wrote on 21 jan 2014 in
> comp.lang.javascript:
>
>> I have a map image and want to position a cross over it.
>>
>> Both are currently in a div container with position set to static.
>> Each image is then inside a div.
>>
>> Everything works fine if I set the position for both to absolute.
>> However I want them to inherit the position of the container. When I set
>> the position of the image divs to relative the map displays fine, but
>> the cross is positioned outside the map and to the right.
>>
>> Any ideas?
>>
>> Here is a cutout of the code:
>> <div id="marked">
>> <div id="container" style="position: static; white-space: nowrap;">
>>      <div id="map" style="position: relative; left: 0px; top: 0px;
>>      z-index:1;"><img
>>      src="anatomi/netter-neruo2002/saggitalbrain-insitu.jpg"></div>
>>      <div id="cross" style="position: relative; left: 302px; top: 155px;
>>      z-index:2;"><img src="imageOverlay_files/dots/d9.png"></div>
>>      </div>
>> </div>
>
> You should read the css position specs again. There is no top and left on 
> a
> relative position, a relative position is only the reference where 
> absolute

You need to be schooled.
http://www.w3schools.com/css/css_positioning.asp


> opsitioned elements are contained in and are relative to. Position static 
> is
> just the default for a webpage, there are very few reasons to use that.
>
> Try:
>
> <div style="position:relative;">
>  <img src="cross.jpg"
>      style="position:absolute;width:300px;height:200px;z-index:4;">
>  <img src="original.jpg"
>      style="position:absolute;width:300px;height:200px;z-index:3;">
> </div>
>
>
>
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress) 

[toc] | [prev] | [next] | [standalone]

#22774

"se" <se@no-one.here> wrote on 24 jan 2014 in comp.lang.javascript:

>> You should read the css position specs again. There is no top and left on 
>> a
>> relative position, a relative position is only the reference where 
>> absolute
> 
> You need to be schooled.
> http://www.w3schools.com/css/css_positioning.asp
> 

I agree that I was wrong there.
But why this ad hominem remark where you could explain and teach us?
Oh, ofcourse, there is @no-one.there to do that.

As I told in later posts:

-- a position:relative; block can be positioned by an offset to its own 
default position by left,right,top, bottom css.

-- a position:absolute; block can be positioned by an offset to its nearest 
parental position:relative; actual position by left,right,top, bottom css,
while, if there is none, the document.body's position is inferred.


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#22796

On 24.1.2014 11:29, Evertjan. wrote:
> As I told in later posts:
> -- a position:absolute; block can be positioned by an offset to its nearest
> parental position:relative; actual position by left,right,top, bottom css,

I'm afraid that this is still incorrect. The parent may also be another 
positioned element (not necessarily relatively positioned).

> while, if there is none, the document.body's position is inferred.

Not quite. The containing block for a positioned box is established by 
the nearest positioned ancestor or, if none exists, the initial 
containing block (i.e. in continuous media the viewport is inferred).

Followup: comp.infosystems.www.authoring.stylesheets

-- 
Best wishes, Osmo

[toc] | [prev] | [next] | [standalone]

#22743

Kanobi wrote:

> I have a map image and want to position a cross over it. […]

Unless you want to do that with client-side scripting, and your code does 
not show any signs of that, this is off-topic here.

Plain HTML is on-topic in comp.infosystems.www.authoring.html.
Plain CSS is on-topic in comp.infosystems.www.authoring.stylesheets.

See also <http://PointedEars.de/faq>.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#22750

To Kanobi

as explained already, keep in mind that
POSITIONED children require POSITIONED parents
so, if you want to position: absolute; an element in relation
to some parent or containing box, set the parent or containing box
to position: relative;
thus any absolutely positioned children will take the parent's 0,0
coordinates as their point of reference

-> http://www.webdevout.net/test?0Is&raw

notice, the Div is the parent to the positioned "no smoking" image
the other image it's just there giving width/height to the Div.

[toc] | [prev] | [next] | [standalone]

#22752

I can see that my parent div is positioned at 0,0 and that it is taking that position as you say.
My problem is that I want to center the picture horizontally on the page, and the cross need to follow with it. The only solution I have found so far is to add this to the parent div using javascript:
width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; margin: auto; left: -364px;

where left:-364px is half the width of the image. This works, but is a bit mucky I think.

kl. 21:32:02 UTC+1 onsdag 22. januar 2014 skrev Danny følgende:
> To Kanobi
> 
> 
> 
> as explained already, keep in mind that
> 
> POSITIONED children require POSITIONED parents
> 
> so, if you want to position: absolute; an element in relation
> 
> to some parent or containing box, set the parent or containing box
> 
> to position: relative;
> 
> thus any absolutely positioned children will take the parent's 0,0
> 
> coordinates as their point of reference
> 
> 
> 
> -> http://www.webdevout.net/test?0Is&raw
> 
> 
> 
> notice, the Div is the parent to the positioned "no smoking" image
> 
> the other image it's just there giving width/height to the Div.

[toc] | [prev] | [next] | [standalone]

#22753

nome.geirr@gmail.com wrote:

> […] The only solution I have found so far is to add this to the parent div
> using javascript: width: -moz-fit-content; width: -webkit-fit-content;
> width: fit-content; margin: auto; left: -364px;

That is not even close to anything that could be unreasonably called 
“javascript”.

Which part of “off-topic” did you not understand?
 
> [top post]

<http://PointedEars.de/faq#posting>

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#23892

Learn CSS Position will help you...

http://www.corelangs.com/css/box/positioning.html

George


On Wednesday, January 22, 2014 3:06:54 AM UTC+5:30, Peter Gruber wrote:
> I have a map image and want to position a cross over it.
> 
> 
> 
> Both are currently in a div container with position set to static.
> 
> Each image is then inside a div.
> 
> 
> 
> Everything works fine if I set the position for both to absolute. However I want them to inherit the position of the container. When I set the position of the image divs to relative the map displays fine, but the cross is positioned outside the map and to the right.
> 
> 
> 
> Any ideas?
> 
> 
> 
> Here is a cutout of the code:
> 
> <div id="marked">
> 
> <div id="container" style="position: static; white-space: nowrap;">
> 
> 	<div id="map" style="position: relative; left: 0px; top: 0px; z-index:1;"><img src="anatomi/netter-neruo2002/saggitalbrain-insitu.jpg"></div>
> 
> 	<div id="cross" style="position: relative; left: 302px; top: 155px; z-index:2;"><img src="imageOverlay_files/dots/d9.png"></div>
> 
> 	</div>
> 
> </div>

[toc] | [prev] | [next] | [standalone]

#23899

lingmaaki@gmail.com wrote:

>Learn CSS Position will help you...
>
>http://www.corelangs.com/css/box/positioning.html
>
>George
>
>
>On Wednesday, January 22, 2014 3:06:54 AM UTC+5:30, Peter Gruber wrote:
>> I have a map image and want to position a cross over it.
>> 
>> 
>> 
>> Both are currently in a div container with position set to static.
>> 
>> Each image is then inside a div.
>> 
>> 
>> 
>> Everything works fine if I set the position for both to absolute. However I want them to inherit the position of the container. When I set the position of the image divs to relative the map displays fine, but the cross is positioned outside the map and to the right.
>> 
>> 
>> 
>> Any ideas?
>> 
>> 
>> 
>> Here is a cutout of the code:
>> 
>> <div id="marked">
>> 
>> <div id="container" style="position: static; white-space: nowrap;">
>> 
>> 	<div id="map" style="position: relative; left: 0px; top: 0px; z-index:1;"><img src="anatomi/netter-neruo2002/saggitalbrain-insitu.jpg"></div>
>> 
>> 	<div id="cross" style="position: relative; left: 302px; top: 155px; z-index:2;"><img src="imageOverlay_files/dots/d9.png"></div>
>> 
>> 	</div>
>> 
>> </div>

Position the container 'relative' and position your map and cross
'absolute' and spec top and left to position (map = 0,0; cross = 155,302).

-- 
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life. 
http://www.breastthermography.info

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web