Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS position: relative help

    Hello,

    I've been having some problems with a div which I want to 'float' (not the css property float) sort of 'over' the actual site. Here's the site;

    http://tostidee.nl/v1public/template.htm

    It's the right image with 'Populair Tostideetje!' in it (div id='tostideetje' in the html). Currently it's positioned the way I want it, but because of the 'bottom: 140px' code I used, the 140 pixels under the div aren't accessible, which is why the jibberish text under it is so much lower. I could reposition that div using 'bottom=140px' as well, but then the problem would still exist only now under that div.

    How could I get the effect I want (have that 'tostideetje' going out of the site' bounds) without messing other stuff up?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    #inside_right {/*css.css (line 110)*/
    background-color:#FEDD4F;
    float:left;
    position:relative;
    width:157px;
    }
    #tostideetje {/*css.css (line 9)*/
    background-image:url(./img/tostideetje.png);
    bottom:140px;
    height:309px;
    left:-20px;
    position:absolute;
    top:0;
    width:275px;
    z-index:1;
    }
    btw, I think an img would be more semantic for that one instead the currently set background image.

    PS: You'd need to use a faux column method if you need to expand that yellow box to touch your footer
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    SanderKnary (05-04-2009)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Great, thanks. For some reason I always understood 'position: absolute' wrong apparently. I always thought it placed the div at (0, 0) in the body, not the parent div.

    Your link to the semantic coding page isn't working. I tried to look for the article myself but couldn't find. Do you have a working link?

    And thanks for the tip on expanding the right column. I still needed to look into that.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Oops! They seems to have used a mod_rewrite to hide the .html part, but didn't add any permanent redirects.

    Check http://boagworld.com/technology/sema...e-what-why-how now.

    PS: You might be interested to see http://www.bonrouge.com/3c-hf-fixed.php, a good 3 column fixed layout with out any box model issues (of IE)

    I always thought it placed the div at (0, 0) in the body, not the parent div.
    The position of an absolutely positioned element is calculated with respect to the boundaries of its relatively positioned immediate parent. That's why I assigned position:relative; to #inside_right.
    Last edited by abduraooft; 05-04-2009 at 03:38 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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