Help - Search - Members - Calendar
Full Version: Vertically Scalable Transparent PNG Overlays
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
esoteric
Hey all, first post and I'm asking for help. Who would'a thought?

I've looked and looked for a solution for this problem myself, but I'm stuck, so I'm putting out a call for help! Hopefully I can visualize this for all of you.

Basically what I'm building for my Wordpress installation is a photo blog. On the main page is one post with the full-size image, but I was hoping for a specific border around it. One that overlays the corners of the image.

Here's the mock-up in Photoshop:

IPB Image

The key is the little white overlays in the corners of the image, and this is the part that's driving me nuts.

The image width (800px) is the same for all images, but the height of the photo may vary, requiring the solution to be vertically scalable. Absolute positioning would easily allow those PNG corners, but from what I can tell, absolute is impossible because you never know where the bottom of the image will be.

So the way I've structured it is that I have a PNG (frametop), and the image has white padding with a black border on it's left and right. This is the "frametop" (Gray is transparent).

IPB Image

So the output from my XHTML and Wordpress is basically "frametop" followed by the photo.

My first idea was to set the proper z-index for the two images to have frametop on top, and then use a negative margin on the photo to move it up and underneath the frame-top.

CODE
#frame_top {
    z-index:10;
}

.the_photo {
    z-index:1;
    padding:0px 10px;
    margin:-6px 0px 0px 0px;
    border-left: solid 1px #000000;
    border-right:solid 1px #000000;
    background-color:#ffffff;
}


Unfortunately, the photo is always on top of frame_top and so the little corners are never seen.

When my code is interpreted I'm assuming that it doesn't realize that the pictures might be overlapping and so it ignores the z-index.

One experiment I tried was to "float:left" the photo. It resulted in this:

IPB Image

I don't understand that at all. I've tried toggling it to see what is actually changes, but the only thing that appears to move is the width of the whole thing. Very strange. How can the photo+padding expand a pixel, especially when the width of the "wrapper" is 820 pixels? I've measured the output in Firefox and it's 821 pixels. The wrapper for everything is 820?!?

Anyways...

So, I'm at a loss! I just want little white corners over my photo! blush.gif
pandy
z-index doesn't apply to non positioned elements.
http://www.w3.org/TR/CSS2/visuren.html#z-index

You could move the border image down with 'position: relative, top: ?px' instead and you don't need z-index. The border will be on top anyway since it's positioned and the image it's overlapping is not.
esoteric
Sweet Christ! That's incredible! What an elegant solution to a long question. Thanks.

Man, while I was thinking about this, I was thinking, hmmm.. there should be some way to use positioning here. I should have sat down and reviewed the different methods.

Thanks again!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.