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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts

    Question Menu & Footer placement

    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

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Where is the search box on your page?
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Currently? Underneath the nav bar. It needs to be on top.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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?!
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    dpDesignz (05-11-2011)

  • #6
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    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?
    Last edited by dpDesignz; 05-11-2011 at 12:42 AM. Reason: footer question

  • #7
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Oh dear. New problem. That has now made my nav buttons unclickable?

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by dpDesignz View Post
    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 )
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    dpDesignz (05-11-2011)

  • #9
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    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.

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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;'.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #11
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Sorry. Yea that was it. . So my z-index for the search is 2, and the nav is 1. Still nothing.

  • #12
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Last edited by AndrewGSW; 05-11-2011 at 02:37 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #13
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by AndrewGSW View Post
    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.

  • #14
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    If I look in your paste-bin http://pastebin.com/p4SnRHUH you have the search-form positioned relatively - should be relative.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #15
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Sorry. forgot to update that one. It is relative.


  •  
    Page 1 of 2 12 LastLast

    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
    •