SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Difficulties with relative positioning

    Hi Everyone,

    I am a bit stuck! Hoping someone here might be able to help...

    On the following URL:

    http://www.wiseup4work.org.uk/new/

    At the bottom just above the footer - the 'See what our users have to say' button at the bottom. I need it to sit so it overlaps the main image (as it is doing now) but without the space below (it is 49px - the wrapper stretches 49px below the seewhat div, pushing the footer down. I have tried negative bottom margin but that breaks the footer).

    Am lost as to what to try next.

    There is a lot of code, so not sure whether to copy it here?

    The CSS for that part is:

    Code:
    #seewhat {
    	top: -49px;
    	padding: 0 18px;
    	position: relative;
    }
    Scared to look at it in IE, still need to cross browser test the site, but trying to get it all working in Firefox first.

    Could you take a look for me?

    Many thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I assume you have tried a negative top margin?

    Code:
    #seewhat {
        margin-top: -49px;
        padding: 0 18px;
        position: relative;
    }
    I haven't looked at your code yet but it's the first think I would try.

    If that doesn't work then float it and the margin will take effect.

    Code:
    #seewhat {
        margin-top: -49px;
        padding: 0 18px;
        position: relative;
        float:left;
        clear:both;
    }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Ah, Paul got in first. Try that, but if it doesn't work, I'd suggest something like this:

    Code:
    #wrapper {
      position: relative;
    }
    
    #seewhat {
      position: absolute;
      bottom: 0;
    }

  4. #4
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys,

    Thanks for coming back to me.

    Paul - I tried the negative top margin before but it will only move up a maximum of about 20px and no more for some reason.

    Ralph, tried your advice, but that didn't work either, the drawer moved up instead of down!!

  5. #5
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This really looks like a padding/margins issue. In your style sheet you can include the following code to force all tags to have zero padding and margins for all tags (unless explicitly stated in the in a class or style)

    Check the padding and margin properties for the "seewhat" DIV (and all child nodes) as well as the footer.

    Also, if position = relative, then for the footer you should have top:0px;

    Also, if you have not already done so, make sure your tags are floated.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sikwondo View Post
    Hi guys,

    Thanks for coming back to me.

    Paul - I tried the negative top margin before but it will only move up a maximum of about 20px and no more for some reason.

    Ralph, tried your advice, but that didn't work either, the drawer moved up instead of down!!
    Did you see the example I gave with float?

    The negative top margin won't work if the static element is under float (becaue margins slide under floats to the top of the containing block) therefore you need to float the #seewhat element instead.

    It will then work

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Sikwondo View Post
    the drawer moved up instead of down!!
    What's the "drawer"?

  8. #8
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Did you see the example I gave with float?

    The negative top margin won't work if the static element is under float (becaue margins slide under floats to the top of the containing block) therefore you need to float the #seewhat element instead.

    It will then work
    Thanks Paul, I think I tried it just before you updated.

    It is better, but for some reason, now when you click the seewhat green button, the drawer that drops down pushes the footer content down, but not the footer container! :S

    Quote Originally Posted by ralph.m View Post
    What's the "drawer"?
    Sorry - by the drawer, I mean the div that is revealed once "See what ... " is clicked.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    have you cleared the footer.
    Code:
    #footer {
        background: url(http://www.wiseup4work.org.uk/new/templates/ebp/images/footer.png) #313131 repeat-x left top;
        width: 100%; 
        height:119px;
        clear:both
    }
    
    You should also apply a clearing mechanism to #wrapper.

    Code:
    #wrapper { 
        margin: 0 auto;
        width: 1013px;
        background: url(http://www.wiseup4work.org.uk/new/templates/ebp/images/mainbg.gif) repeat-y left top; 
    overflow:hidden
    }

  10. #10
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works an absolute charm, thank you very much


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
  •