Grow your CSS skills. Land your dream job.

Absolute Position locking into place?

  • # July 13, 2009 at 1:48 pm

    Hi everyone,

    A new site I’m doing is for a travel agency: http://www.citrusbunny.com/testcenter/ds/

    Took me a while to totally hammer down getting those little corner folds in front of the picture to show up, but I finally got it so the client can now just upload new photos and it will just pop right in leaving the nice folds.

    BUT, one issue I’m having trouble with is that if you collapse the browser, you’ll see the corners collapse beyond the wrapper into the body. I’ve tried a ton of different ways to get the corners to "lock" into place so that when the browser collapses, it doesn’t take the corners with it?

    Here is what I’ve kind of got right now is this:

    Code:
    #header {
    background-image:url(images/header_bg.png);
    background-repeat:no-repeat;
    margin:auto;
    width:800px;
    }

    #topcorner {
    background-image:url(images/corners.png);
    height:396px;
    left:50%;
    margin-left:-262px;
    position:absolute;
    width:524px;
    z-index:11;
    }

    #image {
    background-repeat:no-repeat;
    height:375px;
    margin:auto;
    padding-top:15px;
    width:500px;
    }

    Code:
    # July 13, 2009 at 2:13 pm

    Add this to the css:

    Code:
    #header {
    position: relative;
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".