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.
Common CSS Problem I Have with Relative Positioning
Moderator: General Moderators
Re: Common CSS Problem I Have with Relative Positioning
Why not use absolute positioning for the logo, positioning it on top of the other element?
Or use a background image for the gradient/highlite stuff, and a regular html image for the logo on top?
It's a bit difficult if I don't see the design itself. There's often more possible solutions for the same issue
Or use a background image for the gradient/highlite stuff, and a regular html image for the logo on top?
It's a bit difficult if I don't see the design itself. There's often more possible solutions for the same issue
- volomike
- Forum Regular
- Posts: 633
- Joined: Wed Jan 16, 2008 9:04 am
- Location: Myrtle Beach, South Carolina, USA
Re: Common CSS Problem I Have with Relative Positioning
Absolute positioning won't work because I'm using Blueprint CSS and I don't know where "middle" is via CSS. The image is going to actually be started at about 30px past middle to the right.
Didn't think of the background image + foreground image technique. Duh. Should have thought of that, obviously! Thanks on that one -- I think that's what I'll do. Instead, I was putting the item in two completely separate DIVs.
Didn't think of the background image + foreground image technique. Duh. Should have thought of that, obviously! Thanks on that one -- I think that's what I'll do. Instead, I was putting the item in two completely separate DIVs.
Re: Common CSS Problem I Have with Relative Positioning
Another "trick" which is often handy in cases like these is using absolute positioning within relative positioned boxes. So say you have a header section of your design. With some big (background) image in it. Then within the header you need a few other elements like logo, menu and search box. If you first set the #header div to position:relative; then you can give the other elements like logo and menu a position absolute (in px or % or even em). That absolute position is then made relative to the relative positioned header. That way you are sure they stay in place perfectly. It even works when your header div is of flexible size.