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 14 of 14
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Footer, Position, Overlap using position: relative

    I'm hoping someone will be able to help with this:

    I want to move the footer up so that the main element of the site overlaps the top of the footer. In the footer I've tried adding top: -152px to achieve this, it works but because the footer position is relative as http://www.w3schools.com says "Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow." So there's an unwanted gap of 152px at the bottom of the site.

    Is there some way to achieve that same effect without having the gap?

    (I've experimented with different position values but they result in the footer moving to the top of the page.)

    see http://www.cranihum.com/

    Thank you

    Will

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Hi,

    You have the correct understanding on relative postioning. The way you want to do this is to use a negative margin-top on the footer which will push it upwards, just as a positive margin-top would push it downwards!

    margin-top:-152px;

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you Scriptet, that makes perfect sense but for some reason which I can't fathom, for any value I enter lower than -40px the footer doesn't move position.

    It is very frustrating, as I imagine all coding problems must be if something you expect to work then doesn't!

    I customising a word press theme and adding including a plug-in from spritely.net in my footer.

    Any more pointers would be appreciated

    Thank you

    Will

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    in fact I can tell you why it's -40px specifically.

    there's an item called content-bottom which 40px high, located above the footer. So a negative margin-top value won't go beyond the height of the content-bottom.

    Any ideas what would prevent the footer moving higher than the content-bottom?

    Using a negative top value worked but obviously caused the unwanted gap problem.

    Thank you

    Will

    Below is footer.php from WordPress

    PHP Code:
                <?php global $options; foreach ($options as $value) {    if (get_settings$value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings$value['id'] ); }} ?>                
                    
                </div><!-- /content-wrapper -->
                
                <div id="content-bottom">
                </div><!-- /content-bottom -->            
                
            </div><!-- /main-wrapper -->

            <div id="footer" class="footer">
                <div id="dragMe"></div>
            <div id="hill1" class="footer"></div>        
            <div id="bird"></div>
                    
                <div class="footer-links-wrapper"></div>
                
                <ul id="footer-links">
                        
                    <?php wp_list_pages('title_li=&depth=1&sort_column=post_date'); ?>
                        
                </ul>
                
                <p class="footer-text"><?php echo $kv_footer_text;?></p>

            </div><!-- /footer -->

                <div id="bottomSlider"></div>

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    I think it's because of the overflow:hidden; on the #footer is there any specific reason for this being there?

  • #6
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    yes there is. I have a jQueryUI slider, the background image is 2220px wide and it prevents the whole width being shown when using the slider. (a horizontal scroll bar appears).

    Thank you again for the reply.

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Try adding overflow:auto; to #main-wrapper hopefully it should do the trick!

  • Users who have thanked Scriptet for this post:

    sohopigeon (06-10-2010)

  • #8
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ABSOLUTE (and RELATIVE) GENIUS!

    That's brilliant, does exactly what I want, thank you so much :-)

    What's the reason it works?

    (a very relieved and happy) Will

  • #9
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Glad it worked, I think it's basically it's because your main wrapper wasn't enclosing it's floats, therefore overflow:auto; triggers it to enclose them.

    By default a parent won't enclose around it's floated children if they are not cleared properly, but adding a trigger like overflow:auto; or even floating the parent itself enables it to do this.

  • #10
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ah, I have so much to learn! thank you for the explanation and for spending the time to figure it out.

    Will

  • #11
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I've just noticed that buttons at the bottom of the page, buttons in #main-wrapper which are within the overlap area of the footer, are not working.

    Though the buttons in the footer are working, but I guess that's because they are part of the footer.

    To see what I mean click on Blog and scroll to the bottom of the page and the button "Older Entries" is not clickable.

    Is there a way to fix this?

    Thank you

  • #12
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Sorry I should have forseen this earlier I guess, but add:

    Code:
    position:relative; z-index:10;
    To #main-wrapper

    The z-index is the stacking order of elements, so setting it to a higher number makes it appear over the footer..

  • #13
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    it worked!

    thank you again.

    I did think about z-index as a solution, that's how I got the buttons to work in the footer. But I thought (incorrectly) that the main-wrapper would have a higher z-index as it was displaying over the footer.

    The main-wrapper did not have a z-index value but a lot of the id's within the main-wrapper do.

    Anyway I think I'm confusing myself now, time for bed, thank you again for solving my problem

    Will

  • #14
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    No problem!

    But I thought (incorrectly) that the main-wrapper would have a higher z-index as it was displaying over the footer.
    It wasn't appearing over the footer, but you're thinking is correct in that a higher z-index would cause this, it just had that visual appearance because you didn't have a background set on the footer to appear over the top.

    For example to make it a lot clearer, if you just remove what we added position:relative; z-index:10; from #main-wrapper and add background:#000; to #footer you can see that the footer was appearing over the top of it!

  • Users who have thanked Scriptet for this post:

    sohopigeon (06-11-2010)


  •  

    Tags for this Thread

    Posting Permissions

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