Position div on top of another and not flow around - html

Question

On my homepage I have a slideshow of pictures that are user selectable. I don't want the user to have to modify the image at all.
http://homespun-at-heart.com/ is the example except that the way that it currently is, the user has to modify the image.
What I would like to do is to have a div that is layered on top of the image so that it appears like the content area has a round corner.
How do I position my "round corner" div on top of the image without it pushing the image over?

Answer 1

well you could achieve this with the css3 border-radius property on a div on top, but it's not supported in all browsers. For an image based solution, something like:
html
<div id="container">
<div id="image"><img src="blah.jpg" /></div>
<div id="round">
<img id="topLeftRound" src="leftRound.png" />
<img id="bottomRightRound" src="rightRound.png" />
</div>
</div>
css
#container{
position:relative
}
#image{
position:absolute;
top:0;left:0;
height:100%;
z-index:10;
}
#round{
position:absolute;
top:0;left:0;
height:100%;
z-index:20;
}
#topLeftRound{
position:absolute;
width:10px;height:10px /* or whatever */
top:0;left:0;
}
#bottomRightRound{
position:absolute;
width:10px;height:10px /* or whatever */
bottom:0;right:0;
}
I'm assuming you can guess what you want your topLeft and bottomRight image to be... Just the rounded section of that corner.
I think that's what you're looking for?

Answer 2

You could simply have two divs, one inside the other, both the same width and height. The bottom one is used for the actual photo, i.e. it's background-image will be the photo. And the top one has a background image with transparancy, which is just the 2 rounded corners:
<div id="slideshow"><div id="slideshow_border"></div></div>
Or (perhaps even better), you could have the outside div with the image as a background, then two divs inside, one floated to the left and one to the right, each with a seperate transparant border image. This means that person browsing your website won't need to download the extra transparant pixels that aren't necessary.
<div id="slideshow">
<div class="border left"></div>
<div class="border right"></div>
</div>
And the CSS:
#slideshow {
width: 400px; height: 400px;
background-image: url(images/slideshow1.png);
}
#slideshow .border {
width: 50px; height: 50px;
}
#slideshow .border.left {
float: left;
background-image: url(images/border-left.gif);
}
#slideshow .border.right {
float: right;
margin-top: 350px;
background-image: url(images/border-right.gif);
}
I just used arbitrary values in the CSS.

Answer 3

Do you use jquery on your site? If you do, you can use this plug-in to generate round corners on dom elements : www.jquery.malsup.com/corner/ or this one: www.dillerdesign.com/experiment/DD_roundies/. Both work very well and support all browsers including IE6. To detect IE6 if needed you can use this plug in http://api.jquery.com/jQuery.browser/.

Answer 4

You could do this very easily with CSS3's border-radius property, and you don't need an overlay div or anything. It won't work in IE8 and below, but it works in Webkit and Firefox.
#slideshow img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}