Navigation menu items w/ diff colors

[Janitor_Willie]

I have about 6 navigation menu items. The problem is that I want to style each individual button differently. I want different colored gradient color interiors and different colored borders. Would I need to repeat the 5 classes below six times (for a total of 30 rules) or is there an easier more efficient way to do it?

nav
nav ul
nav ul li
nav ul li a
nav ul li a;hover .selected

I use Dreamweaver and took a couple of study courses but I'm obviously still having trouble applying the knowledge to this problem.

 

[chrishirst]

You can use ANY of the various selectors

adjacent sibling rules are probably the easiest, though

And there is nth-child selectors with which you can create "even and odd" rules

Though NOT using DreamWeaver would be needed to implement some of the more esoteric combinations.


CSS is incredibly flexible PROVIDED that you do not use WYSIWYMGIYAL 'design' tools.

 

[chrishirst]

It is an acronym of

What You See Is What You Might Get, If You Are Lucky

 

[Edge]

It is an acronym of

What You See Is What You Might Get, If You Are Lucky

Should be WYSIWTFHTMC..

What You See Is What The Feck Happened To My Code?

 

[Phreaddee]

if all 6 of them are different, i'd probably use nth-child rules

nav ul li a {/* generic styles */)
nav ul li:nth-child(1) a {/*unique styles here */}
nav ul li:nth-child(2) a {/*unique styles here */}
nav ul li:nth-child(3) a {/*unique styles here */}
nav ul li:nth-child(4) a {/*unique styles here */}
nav ul li:nth-child(5) a {/*unique styles here */}
nav ul li:nth-child(6) a {/*unique styles here */}

in code view there's no problem with using dw...

design view though...

 

[Janitor_Willie]

if all 6 of them are different, i'd probably use nth-child rules

nav ul li a {/* generic styles */)
nav ul li:nth-child(1) a {/*unique styles here */}
nav ul li:nth-child(2) a {/*unique styles here */}
nav ul li:nth-child(3) a {/*unique styles here */}
nav ul li:nth-child(4) a {/*unique styles here */}
nav ul li:nth-child(5) a {/*unique styles here */}
nav ul li:nth-child(6) a {/*unique styles here */}

in code view there's no problem with using dw...

design view though...

Wow! Amazing! It worked!
I wish w3schools had more tutorials. I look at their tutorials then when it comes to designing a site I just draw a blank on certain tasks.

 

[Phreaddee]

of course it works!

probably not in ie8 and below though, but really who cares for that anymore?

 

[Janitor_Willie]

of course it works!

probably not in ie8 and below though, but really who cares for that anymore?

Anyone running IE8 is living in the stone age.

I also added this styling....

background: linear-gradient(to bottom, #00CC00, #030);

Will this suffice for most browsers or is there another line of code that I need to add? This code maybe?...

background: -prefix-linear-gradient(to bottom, #00CC00, #030);

 

[Edge]

of course it works!

probably not in ie8 and below though, but really who cares for that anymore?

Our last client (NHS) only had IE8 on their network and everything had to be perfect in IE8

 

[Edge]

Anyone running IE8 is living in the stone age.

Which is a large part of the public sector in the UK....

 

[chrishirst]

Our last client (NHS) only had IE8 on their network and everything had to be perfect in IE8

Yeah but changing the colours of links doesn't really count as not 'perfect' because what do they have to compare against?


Provided it isn't 'broken' the cosmetics of a layout should not be a "fatal error".

 

[Edge]

Yeah but changing the colours of links doesn't really count as not 'perfect' because what do they have to compare against?

The mockups - just making the point as an aside that we shouldn't get too carried away saying bye bye to IE8 as large parts of public sector here in UK think it's the latest and greatest...

 

[chrishirst]

large parts of public sector here in UK think it's the latest and greatest...

The NHS Windows 7 rollout it pretty well advanced in much of the country though.

 

[Edge]

The NHS Windows 7 rollout it pretty well advanced in much of the country though.

Unfortunately the NHS is a fragmented 'organisation' with trusts and affiliated organisations. As for councils, I'm not going to go there ....

 

[ronaldroe]

...probably not in ie8 and below though...

And if that's a must, there's always selectivizr.