logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-20-2012, 06:33 AM   #1
tmacka88
 
Join Date: Jul 2012
Posts: 11
Default 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
tmacka88 is offline   Reply With Quote
Old 12-15-2012, 10:21 AM   #2
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

Code:
#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(GradientType=0,StartColorStr='#00729b', EndColorStr='#0d477b');
    letter-spacing: 0.11em;
    z-index: 1;
    position: relative;
    border-bottom: solid 2px rgba(1, 43, 82, 1.0);
}
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 12-15-2012, 10:22 AM   #3
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

it's a matter of changing the 4 to a 2.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:10 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com