Position a div layer relevant to an object

**Hobsonschoice** · 12-15-2006, 10:02 AM

Hi peeps,
I have a query regarding positioning of a DIV on a page whic is never the same size.
Right, let me explain.
I want to place a div layer over a background image, Hypothetically lets say i have the page background set as country scene with a timy lake in the middle. Now i want to place a div layer with a duck postioned exactly over the pond.

Now 99% of the time this is easy with the absolute or relative div position. but is it posible say to position it from say the corner of my background image rather than the viewers browser edges. Let me try to explain better, If my page has the country background and then i place a table for example that covers the whole page, say 100% wide by 100% high, can i in any way position my div layer relevant to the top left of the table? and not the browser?
Hope i explained that clear, If i wasn't at work i would upload some code and the issue in full.
If anyone understands what i am trying to do i would apreciate any advice.

**BLiZZaRD** · 12-15-2006, 10:45 AM

Understand that this link is for a CSS menu. but the effect is I believe similar to what you are after. The CSS used is in the source code.

It might give you an idea about using top/left and transparency there.

**Hobsonschoice** · 12-15-2006, 11:05 AM

Just had a quick look at that and not sure that will do it. I need to be able to place a dic layer in a specific place WITHOUT using the left and top coordinates.Ie top:50px left:50pk.
what would perfectly is if i could name the top cell in a table and then postion my div layer with co-ordinates from that named cell.
I'll post my whole problem up with links etc later today, as it's it a bit hard to explain why i would need this without demo.
cheers

**dog** · 12-15-2006, 12:00 PM

I think the solusion the Professor suggested would answer your problem.

Another thing I think, and forgive me if I'm wrong, you perhaps haven't understood that left and top values don't always relate to the window.

If objects are absolutely positioned within a relatively positioned div for example, top:0; left:0; would position the objects in the top left of the containing div (not the top left of the window).

Check out this example.

HTML Code:

<html>
<head>
<style type="text/css">

body {
	text-align: center;
}

#pond {
	background: blue;
	width: 300px;
	height: 200px;
	margin: 100px auto;
	position: relative;
}

#duck {
	background: yellow;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 20px;
	left: 80px;
}

</style>


</head>
<body>

<div id="pond">
	<div id="duck"></div>
</div>


</body>
</html>

I hope this helps.

**Hobsonschoice** · 12-15-2006, 01:15 PM

Hi Dog, Thanks for the reply, plase forgive me, I am from the old school of programming HTMl in notepad and have only really started switching onto to CSS.
I will have a play with your example this afternoon when i get home and if i can't work it will post the whole thing here.
Cheers

**dog** · 12-15-2006, 01:25 PM

Originally Posted by Hobsonschoice

Hi Dog, Thanks for the reply

No problem man. I always like it when I find a thread I can actually help with.

plase forgive me, I am from the old school of programming HTMl in notepad and have only really started switching onto to CSS.

Cool! No reason you can't carry on in Notepad.

Good luck and have fun!

**Hobsonschoice** · 12-15-2006, 01:28 PM

Here ya go, this should explain the problem.
I have a fixed background image which i would like to keep fixed so that i can scroll text over it.
Now i have placed your yellow box to represent a cocnut so to speak against the tree,
If i scroll the cocnut moves, i want the cocnut to keep its place.

The finished product should work when posted into an ebay style template here.
http://auctionsupplies.com/practice/ebay.shtml

Here is your adjsuted code.

<html>
<head>
<style type="text/css">

body {
background-attachment:fixed;
margin-top:0;
margin-bottom:0;
margin-left:0;margin-right:0;
background-image:url("http://www.anisites.com/crusoe/images/beach4.jpg");
}

#pond {
background: ;
width: 300px;
height: 500px;
margin: 10px auto;
position: relative;
}

#duck {
background: yellow;
width: 10px;
height: 10px;
position: absolute;
top: 300px;
left: 900px;
}

</style>

</head>
<body>

<div id="pond">
<div id="duck"></div>
</div>

</body>
</html>

**Hobsonschoice** · 12-15-2006, 01:30 PM

How can one man spell coconut so consistently wrong

**dog** · 12-15-2006, 01:41 PM

Try giving the duck/coconut a fixed position rather than an absolute position.

This works for Firefox but not IE.

I can't seem to find a solusion to use in IE as it doesn't seem to respond to fixed or static positioning.

good luck!

**Hobsonschoice** · 12-15-2006, 01:49 PM

Boss is away so had a play.

Here is the challenge.

<html>
<head>
<style type="text/css">

body {
background-attachment:fixed;
margin-top:0;
margin-bottom:0;
margin-left:0;margin-right:0;
background-image:url("http://www.anisites.com/crusoe/images/beach4.jpg");
}

}

#nut {
background: yellow;
width: 10px;
height: 10px;
position: absolute;
top: 300px;
left: 900px;
}

</style>

</head>
<body>

<div id="pond">
<div id="nut"><img src="http://www.greentales.com/files/coconut.jpg" width=80 height=40></div>
</div>

<table width=400 border=2><h1>

<tr><td>

This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>

This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>
This is the challenge. The text should scroll over the fixed background,Whikle the coconut stays in place on the tree

withoutscrolling. This must be done only with Css and there should be no openeing html tag or body tag as ebay strip them

when loading.<p><p>

</td></tr>
</table>

</body>
</html>