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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    css nav bar with border problem

    Ok. So i am making a nav bar and i am running into a problem with with the :active function. I basically want the border to be 2px rather than 4px and move the whole button down 2px to give it a look as if it is pressed in.

    here is the nav bar so far.

    http://jsfiddle.net/Xuybs/

    I problem im having is with using the border and radius. the only way i can get the border to round out on either side of the bar is to have the border in the #navbar-wrapper. If i put in the the #nav-home a:active the border does not round out.

    any help would be great. thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello tmacka88,
    A little top margin makes it look like the button is pressed -
    Code:
    #narbar-wrapper ul a:hover {
        color: #e8e8e8;
      margin-top: 4px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello tmacka88,
    A little top margin makes it look like the button is pressed -
    Code:
    #narbar-wrapper ul a:hover {
        color: #e8e8e8;
      margin-top: 4px;
    }
    Yeh thats works, fine.

    The only other problem is I also want it to separate from the top position when clicked also. e.g as if the whole button moved down. like this getactionsapp.com

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by tmacka88 View Post
    Yeh thats works, fine.

    The only other problem is I also want it to separate from the top position when clicked also. e.g as if the whole button moved down. like this getactionsapp.com
    I think just changing the background color on active would do that for you...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    success! think i have been looking at it too long to pick it up...

    thanks


  •  

    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
    •