Forum Moderators: open
I want to use an image at the top of my frame (let's call it the lacy fringe)
I want my text to scroll UNDER the lacy fringe, still visible in the "holes"
tried using layers, but I can't figure out how to get the layer with the image to stay still while the rest scorll away merrily.
Any help would be greatly appreciated.
Startledfrog
[edited by: korkus2000 at 5:57 pm (utc) on Jan. 12, 2003]
[edit reason] Tos #13 no sigs please [/edit]
What you want to do "should" be achievable with a div using position:fixed -- however, browser support is still very spotty, so I'm also stuck for an idea that would work in practice.
I think that this could possibly be done using some javascript.
Maybe you have been to some sites where they have a little floating box or form thingy that usually lets you indicate if that page was helpful or to allow you to rate something on that page or with contact info.
The little box or form will float above anything below it and as you scroll down the page the floating thing stays in its place. You might be able to use it with a graphic instead of a form as I've seen it. The "holes" in the lacy thing might need to be a transparant part of the graphic.
If you haven't seen these floaters I can look around for an example. I remember them from a few sites that I frequent but am not sure which ones.
[edit] This can be done as I wrote above. I've just created a simple test using a 'Floating Menu' script and a custom gif with transparant windows for your 'holes'.[/edit]
I've been trying to do it with a div. I tried it with Javascript, but the floating layer tends to jumps when you scroll, and I want it to stay motionless while the rest scrolls.
I've seen it done, so I know it can be done, but the place I saw it done is gone.
I will have a go with the iframe idea though. Worth a try.
Thankyou all for your help.
Sounds like you've run across a variation of Eddie Travera's floating persistent layer script [dhtmlnirvana.com].
You could try to use this little technique I suggested a while back in another thread (but got no reponse).
Here's a link [joshie76.f2s.com] to an example...
Basically you put your main (body) content into a scrollable <div> inside your <body> tag, which you make non scrollable and marginless. Then place absolutely positioned div tags in the body to hold your floating content, e.g.
<body style="overflow:hidden;margin:0px">
<div style="position:absolute;top:0px;left:0px;padding:0px;width:100%;height:100%;overflow:auto">
Treat this div tag as your normal body...
</div>
<div style="position:absolute;padding:10px">
This will now float - and smoothly!
</div>
</body>
I've tested it in IE5.5, IE6.0, Mozilla 1.0.2, Netscape 6.2 and Opera 7(b2) - and it works smoothly in all but Opera 7 (the margins are a little out of place but you may be able to fix this with some tweaking). It may also work in IE4.0+ but I've not had a chance to test it.
Let me know if you use it and how you get on with it.
Josh
