Log in

View Full Version : 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 (http://www.cssplay.co.uk/menus/flickerfree.html) 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>
<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
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>
Hobsonschoice
12-18-2006, 01:59 PM
Well, i have been looking around and it seems this will only appear to only work in Firefox,

I did read somewhere that it was possible to make the position relative to the parent DIV and not the window, which was interesting but just gives me a similar problem i think.
My head hurts, will have to go away and think on this some more. If only IE could work as Mozilla always the same cross browser issues, nightmare for designers.
chechu
12-26-2006, 11:52 AM
<div style="width:160px;height:95px;overflow:auto;">

How can I make a fixed background, that wouldn't scroll with the content ?