Color between buttons but not the background color

[scrlked]

Hi,

I am currently creating a set of buttons for the navigation bar for the top of the website. Im wondering what is the best practice for adding an image between the navigation buttons. I will be adding a rollover so the images change but I do not want the image/color between the buttons to change. I was thinking there could be two options.

1) Make the color between the bottons part of the button image itself.
2) Add an extra image between each button.

To help visualize what i am trying to do take a look at the nav bar for CCS-Tricks you see Home and the Forums buttons are right next to each other. I would want to add an image between the two that would not change. It would look like the buttons are sitting ontop of that image.

Which would be the preferred way?

Regards,

[scrlked]

Hmm. I would have to find out how to make 2 background images stack on each other. The main background, then the background to the navbar. Something to think about.

[kevsyers]

If i’m understanding you correctly and then understanding virtual correctly I think it would be something like this

Nav html code

Home


About

nav css code

.menu {

background: url(image.xx);

}



.menu li {

background: url(image.xx);

}

With the proper space between each li I think you might could get the desired effect. Anyone else have any ideas?

[Bob]

If you just give your body a background image, and then the list items of your menu a background image that changes on rollover and add some spacing between the list items, the background image of the body will show on that spacing between the menu items.

[Author]

Posts