...

View Full Version : Footer, Position, Overlap using position: relative



sohopigeon
06-10-2010, 04:11 PM
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

Scriptet
06-10-2010, 06:19 PM
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;

sohopigeon
06-10-2010, 06:38 PM
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

sohopigeon
06-10-2010, 06:56 PM
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 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>

Scriptet
06-10-2010, 07:09 PM
I think it's because of the overflow:hidden; on the #footer is there any specific reason for this being there?

sohopigeon
06-10-2010, 07:14 PM
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.

Scriptet
06-10-2010, 07:21 PM
Try adding overflow:auto; to #main-wrapper hopefully it should do the trick!

sohopigeon
06-10-2010, 07:30 PM
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

Scriptet
06-10-2010, 07:46 PM
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.

sohopigeon
06-10-2010, 07:53 PM
Ah, I have so much to learn! thank you for the explanation and for spending the time to figure it out.

Will

sohopigeon
06-10-2010, 11:43 PM
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

Scriptet
06-10-2010, 11:47 PM
Sorry I should have forseen this earlier I guess, but add:


position:relative; z-index:10;

To #main-wrapper

The z-index (http://www.w3schools.com/Css/pr_pos_z-index.asp) is the stacking order of elements, so setting it to a higher number makes it appear over the footer..

sohopigeon
06-10-2010, 11:57 PM
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

Scriptet
06-11-2010, 12:03 AM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum