Position div on top of another and not flow around

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

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 2

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