Navigation .. borders? sorta.. css help

[nickbunyun]

Hi guys…

I need help…

I have this designed in Photoshop, and im coding it.

Now I have made the buttons with the background
the rollover with the darked green gradient

Now the button separators are 10% soft light

If i make border-left:1px solide #…. <some dark green

but it doesnt look good…
so could i cut 2px of the separator and put it as a border?

[cmoist]

That’s what I would do. I would use a border on the left and right of each button, then use a background image for the background of each button. This would mean that the separators would not be gradiated (<–what’s gradiated mean?), but it would be hard to notice.

Assuming your code looks something like this:

Code:

• Button
• Button
• Button

The CSS would look like this (in addition to all your current declarations):

Code:

ul li a {border-left: 1px solid #283711; border-right: 1px solid #48641d;}

You could even change the colors on the hover state if you’re inclined.

[nickbunyun]

sorry i meant gradient (color fades from light green to dark green)
[img]http://www.outbackphoto.com/workflow/wf_74/gradient.jpg[/img]

^ simple gradient example..

well, this is right now

Code:

#nav a{
height:38px;
display:block;
padding-right:15px;
padding-left:15px;
color:white;
font-family:verdana;
font-size: 11px;
font-weight:bold;
text-decoration:none;
}
#nav a:hover {
background-image:url(‘images/nav_hover.png’);
}

and i did do the border left and border right before, but its does not look as good.
I start with
[light color on top]
[fades]
[dark color on bottom]

if i use a lighter green.. its too light for the bottom… but good on top
if i use a dark green its too dark for the top, but good on bottom.

so i was wondering if i can crop the 2px separator in photoshop, and somehow use it

[Capt Otis]

You could crop those 2 pixels and set them as the background picture for the ul, then leave a 1px space on the left and right side of each button. Make sense?

[nickbunyun]

can u give me a css code example.. i dont think i understood that one fully.. :(

[Capt Otis]

Using cmoist’s post….

Assuming your code looks something like this:

Code:

• Button
• Button
• Button

The CSS would look like this (in addition to all your current declarations):

Code:

ul#menu {
background-image:url(image.gif);/*Make this your small gradiant picture*/
background-repeat:repeat-x;
}
ul#menu li {
width:70px;/*change to whatever*/
height:30px;/*change to whatever*/
background-image:url(image2.gif);/*Make this your button picture*/
background-repeat:none;
margin:0px 1px;/*1px margin left & right*/
}

See how that works? Each button has a margin, and in the gap you see the background of the ul.

[Author]

Posts