SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    port perry, ontario
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating an offset 'picture frame' using CSS

    I'm looking for a way to create an offset "picture frame" that would appear behind images on the site I'm building. Ideally, the frame would shrink/expand depending on the size of the photo.

    You can see what I'm trying to accomplish at this link http://www.cmswebsolutions.com/girl.jpg. The frame is the beige in the background 16px wide offset by approx 15%.

    Is there a way of doing this using CSS rather than tables? Thanks :-)

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    One way to do that would be two use two images: one for the tan offset, and one for the image. Then using absolute positioning place the tan offset where you want it, and then place the image 20px to the right and 20px lower than the tan image.

    Another way is to nest the image inside a div tag and use the background color of the div to provide the offset:

    <div><img src="image1.jpg" /></div>

    In IE6, I initially tried this with a 50 x 50 px image:

    div{
    color:red;
    background-color: black;
    height: 50px;
    width: 50px;
    }


    img{
    margin-top: 20px;
    margin-left: 20px;
    }


    but even though the div's height and width is set, the div stretches in height and width to contain the image + the img margins. But, when I added

    position: absolute;

    to the img properties, the div allowed the image to exit it's borders. It also works in the latest Firefox browser.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    port perry, ontario
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks 7stud.

    I was able to find a similar solution on Phil Baines site at http://wubbleyew.com/tests/dropshadows.htm. It was much easier to find an answer once I realized I was looking for drop shadows. :-)

    Still doing a bit of fine tuning to get it pixel perfect but here's my adaption so far:

    <div class="imagebox"><img src="images/image.jpg" alt="image" /></div>

    .imagebox{
    float:right;
    clear:right;
    background: url(images/shadowAlpha.png) no-repeat top left !important;
    background: url(images/shadow.gif) no-repeat top left;
    margin: 10px 0 10px 5px !important;
    margin: 10px 0 10px 0;
    }
    .imagebox img{
    display: block;
    position: relative;
    background-color: #e2bc7f;
    border: none;
    margin: 16px -16px -16px 16px;
    padding: 0;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •