CSS Multi-coloured Menu tabs

milagro

Anyone know how to do multicoloured menu tabs in CSS without using image files. Any examples I have seen are all the one colour .

dahamsta

The style is probably applied to the tabs with a .class, so just copy the class to several #ids and edit them to change colour.

adam

chabsey

milagro wrote:

Anyone know how to do multicoloured menu tabs in CSS without using image files. Any examples I have seen are all the one colour .

Not entirely sure what you mean. There's a couple of possible ways of diong this. If you want curved tab edges and want to use MOZ only CSS I think there's a way of formatting edges to give curves...there are for forms anyway.

otherwise I'd just create a couple of transparent gifs with the curved edges of the tab (left and right) and then just set the colour/border by CSS. A hover pseudo class would work with this method.

Is this what you're talking about?

milagro

I want to create tabs across the top of a web page but I want each tab to be a different colour. I've seen lots of code examples for creating the tabs but none with each tab being a different colour. I was just wondering if it was possible to do this without having to load an image for each tab.

chabsey

milagro wrote:

I want to create tabs across the top of a web page but I want each tab to be a different colour. I've seen lots of code examples for creating the tabs but none with each tab being a different colour. I was just wondering if it was possible to do this without having to load an image for each tab.

off the top of my head, a possible (but messy) way of doing this is to assign individual classes to each tab of your tabbed nav. So say you're using an unordered list to create the horizontal nav, then you'd do something like this:

<div id="navigation">
<ul>
<li class="green"><a href="index.htm">Home</a></li>
<li class="red"><a href="aboutus.htm">About Us</a></li>
</ul>
</div>

And then define the different colours in the CSS style sheet, something like this:

.green {
background-color: green;
}
.red {
background-color: red;
}

etc. It's messy cause you're increasing the size of your CSS file for the sake of the multicoloured tabs, but if you have a single hover colour for all tabs you could cut down on the excess CSS size. Like I say, this is only one way of doing it, I'm sure there's an easier way.

milagro

Thanks