...

View Full Version : Menu & Footer placement



dpDesignz
05-10-2011, 11:52 PM
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
05-11-2011, 12:49 AM
Where is the search box on your page?

dpDesignz
05-11-2011, 01:17 AM
Currently? Underneath the nav bar. It needs to be on top.

AndrewGSW
05-11-2011, 01:26 AM
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
05-11-2011, 01:33 AM
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
05-11-2011, 01:42 AM
which is what I said it's under. As in beneath not below. :).

THANK YOU SO MUCH!!!! :D

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

dpDesignz
05-11-2011, 01:45 AM
Oh dear. New problem. That has now made my nav buttons unclickable?

AndrewGSW
05-11-2011, 11:08 AM
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 :thumbsup: )

dpDesignz
05-11-2011, 11:26 AM
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
05-11-2011, 12:39 PM
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
05-11-2011, 01:12 PM
Sorry. Yea that was it. :). So my z-index for the search is 2, and the nav is 1. Still nothing. :(

AndrewGSW
05-11-2011, 03:35 PM
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
05-11-2011, 10:29 PM
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
05-11-2011, 11:30 PM
If I look in your paste-bin http://pastebin.com/p4SnRHUH you have the search-form positioned relatively - should be relative.

dpDesignz
05-11-2011, 11:45 PM
Sorry. forgot to update that one. It is relative.

AndrewGSW
05-11-2011, 11:55 PM
In your style.css you have 'p:a' which should be 'p a', although that's not enough to cause it to mis-behave.

dpDesignz
05-12-2011, 12:00 AM
that's calling to change the colour of a link in any paragraph. It's CSS3 I think. Hmm. Yea. If I can just get the z-index to work it would be so much better! :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum