Common CSS Problem I Have with Relative Positioning
Posted: Sun May 25, 2008 12:14 am
Here's a common problem I have with CSS with relative positioning. Perhaps you can help?
Let's say I have a DIV containing one IMG that says "Logo". Then, I have another DIV that contains another IMG below it on the page that is white hilite spray on a transparent surface, and it's a GIF (so that it works in all browsers). Next, the goal is to take the hilite, set it's z-index less than the logo so that it goes underneath the logo, and then reposition it under the logo. This gives the effect of a light source on the logo and the surrounding area.
Sounds easy, right? Wrong. I can get it to move there with relative positioning, but the DIV still takes up space on the page below where the IMG used to be and I can't figure out how to get the remaining DIVs to pop up automatically and occupy the space where the hilite image used to be before I moved it.
What's the way to do that and in a way that is cross platform?
The only other opportunity I have is to just make the whole thing a bitmap (and a large one at that) and stick it on the page, but that increases the time it takes to draw the page and isn't blended in smoothly, such as when the logo and hilite are on top of a gradient.
Let's say I have a DIV containing one IMG that says "Logo". Then, I have another DIV that contains another IMG below it on the page that is white hilite spray on a transparent surface, and it's a GIF (so that it works in all browsers). Next, the goal is to take the hilite, set it's z-index less than the logo so that it goes underneath the logo, and then reposition it under the logo. This gives the effect of a light source on the logo and the surrounding area.
Sounds easy, right? Wrong. I can get it to move there with relative positioning, but the DIV still takes up space on the page below where the IMG used to be and I can't figure out how to get the remaining DIVs to pop up automatically and occupy the space where the hilite image used to be before I moved it.
What's the way to do that and in a way that is cross platform?
The only other opportunity I have is to just make the whole thing a bitmap (and a large one at that) and stick it on the page, but that increases the time it takes to draw the page and isn't blended in smoothly, such as when the logo and hilite are on top of a gradient.