CSS help: transpararent panel over photo

Discussion in 'Web Design and Development' started by JonD25, Jun 30, 2007.

  1. JonD25 macrumors 6502

    Feb 9, 2006
    Ok, I'm designing a portfolio site for someone that's built on Pixelpost. I'm designing the template now, and I've run in to some problems. First, here's the VERY rough, incomplete site as it is now.


    Like I said, it's very rough right now, with mostly just test info and photos in it (one of the photos is even mine, used just for test purposes).

    What I need help with is on the bottom. As you can see, it doesn't look good. What I want is for the transparant black panel on the bottom left of the photo to slide up when "info" is clicked, kinda like how when you click "comments" that stuff slides down. The problem is that I don't know how to make the panel lay on top of the photo while allowing the footer to stay right underneath without that big space. As you can see if you check the code, I have the panel in it's own div with an ID "exif", placed right underneath the photo, with the CSS positioning relative, and a top as -150 (the height of the panel). Obviously, this isn't the right way to do it exactly, because that's why there's the space there. So, what I'm wondering is how I can place the panel over the photo while being able to place the footer cleanly underneath the photo. It may be something really easy that I'm just not aware of, or perhaps something that I'm doing wrong fundamentally that I need to fix first. Any help would be awesome. Thanks!
  2. JonD25 thread starter macrumors 6502

    Feb 9, 2006
    Ok, it's been changed slightly. You have to click "info" down on the bottom to see my problem now. Can anyone help?
  3. JonD25 thread starter macrumors 6502

    Feb 9, 2006
    Ok, I don't need help anymore. I posted this on another forum as well, and got my solution. Here's what was said in case anyone else wanted/needed to know.

    "Interesting. You should be able to achieve the same positioning by moving the exif div inside the photo div, setting position:relative on the photo div, then position:absolute, bottom:0 and left:0 on the exif div. If you can stick it there (even though it may not be as semantically nice), it shouldn't have any effect on the footer."

Share This Page