Position div on top of another and not flow around

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 po开发者_如何学Pythonsition my "round corner" div on top of the image without it pushing the image over?

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?

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.

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/.

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;
}