Menu & Footer placement

[dpDesignz]

I am working on this site (http://www.roctrust.org.nz) and I have my search box which I want to be on top of my nav-bar, but I can only seem to get it under. Can anyone help?

header.php
http://pastebin.com/bTTv7Hmh

style.css
http://pastebin.com/p4SnRHUH

nav.css
http://pastebin.com/rU7030pa

Also my footer on the bottom everything is hugging the bottom of my footer. EVEN if I put padding in. I think I may have missed something. Can anyone help? Style-sheet as above.

footer.php
http://pastebin.com/Tqm86p2M

Thanks in advance

[AndrewGSW]

Where is the search box on your page?

[dpDesignz]

Currently? Underneath the nav bar. It needs to be on top.

[AndrewGSW]

Perhaps my eyes are deceiving me but I can't see any search box on your page. Edited: Unless you mean that it is behind the nav bar?!

[AndrewGSW]

Yeah, hiding behind.

Your header is relatively positioned so it sits above your search box. You need to position the search box (absolutely or relatively) and possibly give it a z-index to bring it to the top.

[dpDesignz]

which is what I said it's under. As in beneath not below. .

THANK YOU SO MUCH!!!!

You wouldn't happen to know what's wrong with my footer would you?

[dpDesignz]

Oh dear. New problem. That has now made my nav buttons unclickable?

[AndrewGSW]

Originally Posted by dpDesignz

Oh dear. New problem. That has now made my nav buttons unclickable?

You need to add 'position: relative;' to the search box otherwise it remains a static, block-level element and obscures the nav bar. Your nav bar could have z-index 1 and the search box z-index of 1 (or 2) to sit just above the nav bar.

(If both items are positioned relatively and have the same z-index of 1, then the search box will sit above the nav bar as is it occurs after the nav bar in the document order. But it will do no harm to give the search box a z-index of 2 )

[dpDesignz]

Thanks. Except I changed the nav to 1 and the search to 2 and it hid again. So I changed the nav to relatively, making them both the same. The navbar shot up to the top, the search moved down to the content and my sidebar moved to the bottom of the page :S. Hmm. I don't seem to be winning here. . Any ideas? I have updated the pastebin files above to what I now have if you want to take a look. The navbar is called by the navv.css id nav, and the search is called by the style.css search-form id.

[AndrewGSW]

I think you need to re-read my previous post more carefully; in particular, I never advised changing the position for the nav bar to 'relative'.

"If both items are positioned relatively and have the same z-index of 1.."

perhaps I should have said:

"If both items are positioned and have the same z-index of 1.."

Perhaps this caused confusion? Leave the nav bar as 'position: absolute;'.

[dpDesignz]

Sorry. Yea that was it. . So my z-index for the search is 2, and the nav is 1. Still nothing.

[AndrewGSW]

Looking at your page http://www.roctrust.org.nz/ you do not have the seach box positioned relatively.

Added: Make the DIV with id 'search-form' 'position:relative;' - not the actual form, but its container div.

[dpDesignz]

Originally Posted by AndrewGSW

Looking at your page http://www.roctrust.org.nz/ you do not have the seach box positioned relatively.

Added: Make the DIV with id 'search-form' 'position:relative;' - not the actual form, but its container div.

If you looked at my pastebin above like I said that's what it has been since the beginning when you first said to. The id nav is absolute and the id search-form is relative. It's all in the right place and the z-index works if the nav is -1 and the search-form is 1, but then my nav buttons aren't clickable. Same as before.

[AndrewGSW]

If I look in your paste-bin http://pastebin.com/p4SnRHUH you have the search-form positioned relatively - should be relative.

[dpDesignz]

Sorry. forgot to update that one. It is relative.