Grow your CSS skills. Land your dream job.

Position: absolute Problem

  • # December 11, 2008 at 4:25 pm

    Hi, i put an rss badge in my site, it looks beautiful but when i resize my navigator moves over the site… how can i fix this? whats wrong in the css code please?

    Code:
    .rssbadge{
    background-attachment:scroll;
    background-color:transparent;
    background-image:url(images/rss.png);
    background-position:0 0;
    background-repeat:no-repeat;
    height:64px;
    left:1067px;
    position:absolute;
    top:90px;
    width:64px;
    z-index:1000;
    }

    Screenshoot
    image1
    [img]http://i358.photobucket.com/albums/oo27/ivorjpc/badge1.jpg[/img]

    image2
    [img]http://i358.photobucket.com/albums/oo27/ivorjpc/badge2.jpg[/img]

    Rob
    # December 11, 2008 at 5:51 pm

    it depends where you put the badge. Positioning is effected by the last positioned object, if you put your badge in your page wrap div (if you have one) making sure the wrap has at least position:relative, the badge will get its absolute position calc from that div. I think at the moment you probably have your badge placed outside all your divs or the div that it is in has no positioning set?

    Did that make sense? nice badge btw :)

    # December 11, 2008 at 5:53 pm

    Yeb rob has it right. You need to make sure one of those inner div’s has postion: relative; on it, which will limit the scope of the absolute positioning, and then place the badge div inside of that.

    # December 12, 2008 at 4:23 pm

    Nothing to add (Chris already answered the question), but I like the concept of a sticker for the RSS feed :lol: And the design looks very nice (from what little of it I can see in the screenshot).

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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