1 (edited by EmpyrealBlue 2010-02-25 19:27:33)

Topic: DIV with CSS fixed position on top of flash


i just bought TiltViewer pro and am building a website, but i ran into a problem.

I want a header above and a footer below the tiltviewer flash object. And then i want TiltViewer to scale appropriately to use whatever space is inbetween those two. Initially i did this by simple having the header plain and simple above the flash object and the footer as a DIV with fixed position at the bottom of the screen.

However this creates two problems: A) with the flash object's height being 100% it actually uses 100% of the height of the window, thus anything above (in this case the header) the flash object creates a scrollbar (or with overflow as hidden a part of the flash object would fall off the bottom of the screen), anything added before or after the flash object; and B) the footer disappears "behind" the TiltViewer flash object.

I solved the first problem by putting the header in another DIV with fixed position, so it always stays at the top of screen and doesn't interfere with the flash object's height being 100%. However, that creates a new problem, which is actually the same as the problem with the footer: now the header disappears "underneath" the flash object as well.

Here's the page: http://www.empyrealblue.com/?p=automotive

Above the first grey horizontal line is the header, below the second grey horizontal line is the footer. As you can see the flash goes "on top" of both DIVs. So i want the flash object to either stay between those two lines and scale accordingly, or make those two DIVs render on top of the flash. Anyone have any ideas how to do this?