PDA

View Full Version : css nav bar with border problem


tmacka88
11-20-2012, 05:33 AM
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

jmichae3
12-15-2012, 09:21 AM
#narbar-wrapper {
margin-top: 20px;
height: 30px;
width: 231px;
border-radius: 5px;
margin-left: 100px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgba(60, 152, 183, 1.0);
background-color: rgba(1, 43, 82, 1.0);
background-color: #00729b;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 114, 155)), to(rgb(13, 71, 123)));
background-image: -webkit-linear-gradient(top, rgb(0, 114, 155), rgb(13, 71, 123));
background-image: -moz-linear-gradient(top, rgb(0, 114, 155), rgb(13, 71, 123));
background-image: -o-linear-gradient(top, rgb(0, 114, 155), rgb(13, 71, 123));
background-image: -ms-linear-gradient(top, rgb(0, 114, 155), rgb(13, 71, 123));
background-image: linear-gradient(top, rgb(0, 114, 155), rgb(13, 71, 123));
filter: progid:DXImageTransform.Microsoft.gradient(Gradien tType=0,StartColorStr='#00729b', EndColorStr='#0d477b');
letter-spacing: 0.11em;
z-index: 1;
position: relative;
border-bottom: solid 2px rgba(1, 43, 82, 1.0);
}

jmichae3
12-15-2012, 09:22 AM
it's a matter of changing the 4 to a 2.