css nav bar with border problem

[tmacka88]

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

[Excavator]

Hello tmacka88,
A little top margin makes it look like the button is pressed -

#narbar-wrapper ul a:hover {
    color: #e8e8e8;
  margin-top: 4px;
}

[tmacka88]

Originally Posted by Excavator

Hello tmacka88,
A little top margin makes it look like the button is pressed -

#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

[Excavator]

Originally Posted by tmacka88

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...

[tmacka88]

success! think i have been looking at it too long to pick it up...

thanks