CSS problem - styling links/menus

pburns

I've been away from CSS for a while and can't get my head around this (see code below).

This is a left-hand nav, styled with CSS. However I want the last link (Members section) to be styled differently (background/link colours etc.). I can't figure out how to do it though. I have tried applying a class ('li class=...') but it makes no difference. AFAIK ID selectors take precedence over classes.

I'm sure there has to be a simple answer to my problem? Can someone please enlighten me?

HTML:
<div id="sidenav">
<ul>
<li><a href="index.asp>Home</a></li>
<li><a href="about.asp"About</a></li>
<li><a href="news.asp">News</a></li>
...
<li><a href="login.asp">Members Login</a></li>
</ul>
</div>


CSS:
#sidenav ul {
list-style: none;
margin: 0;
padding: 0;
}

#sidenav li {
border-bottom: 1px solid #ED9F9F;
}

#sidenav li a:link, #sidenav li a:visited {
display: block;
padding: 0.2em 0 0.2em 0.5em;
border-left: 12px solid #FF6600;
background-color: #FFFFCC;
color: #009933;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}

#sidenav li a:hover {
background-color: #FF6600;
color: #FFFFFF;
}

#sidenav ul ul {
margin-left: 12px;
}

#sidenav ul ul li {
border-bottom: 1px solid #ED9F9F;
margin:0;
}

#sidenav ul ul a:link, #sidenav ul ul a:visited {
background-color: #009933;
color: #FFFFFF;
}

#sidenav ul ul a:hover {
background-color: #00CC33;
color: #FFFFFF;
}

forbairt

pburns wrote: »

#sidenav ul ul {
margin-left: 12px;
}

ul ul ??? should that not be ul li ?

Goodshape

pburns wrote: »

I have tried applying a class ('li class=...') but it makes no difference. AFAIK ID selectors take precedence over classes.

I can't see why not.

ul#sidebar li.lastLink (or something similar) should work fine afair.

pburns

forbairt wrote: »

ul ul ??? should that not be ul li ?

No, that controls the sub nav.

dkell

If you attach a class to the a element in the html, and chain the id & class selectors in the css it should work ok:

[HTML]
<div id="sidenav">
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href="about.asp">About</a></li>
<li><a href="news.asp">News</a></li>
<li><a class="different" href="login.asp">Members Login</a></li>
</ul>
</div>[/HTML]

CSS:
[HTML]
#sidenav ul li a.different
{
background-color: green;
}
#sidenav ul li a:hover.different
{
background-color: blue;
}
[/HTML]

forbairt

Goodshape wrote: »

ul#sidebar li.lastLink (or something similar) should work fine afair.

except I think the div has the id ... not the ul ... so that shouldn't work

forbairt

BTW ... your original message gave ...

'li class=...'

your css would then need to have something along the lines of

ul li.myClassName a { background-color: #FF0000; }

As just having li.myClassName { background-color: #FF0000; } may not give you the right result as the a you are using will probably override this background color

Goodshape

forbairt wrote: »

except I think the div has the id ... not the ul ... so that shouldn't work

In which case it'd be best to go for the "something similar", as I mentioned

It was probably not chaining the ID and CLASS that was the problem, as dkell mentioned. I'd be in the habit of doing that by default so I've forgotten whether it's an actual requirement or not.

pburns

Thanks everybody for responding. dkell's suggestion worked a treat.

I put the site together a couple of months ago and learned a lot about CSS. Then I got divereted to other non-CSS/non-techie work and it's hard to get your head around it again straight away - I couldn't remember how to combine IDs and classes. I'm really beginning to wonder if there is a huge downside to CSS layout in terms of increased development time though (?) I guess there are templates available but sometimes it's better to do it yourself if you want to learn.

I'll probably post a test version of the site up soon for comments/criticism.

dkell, you are a scholar and a gentleman and a CSS whizz!

Goodshape

pburns wrote: »

I'm really beginning to wonder if there is a huge downside to CSS layout in terms of increased development time though (?)

Not once you get used to it. Styling with CSS means much leaner and quicker-to-code HTML and, once you have something you like, often there's much of your basic CSS code can be reused from one site to the next.

The real benefit, I find, comes when it's time to review and edit and make those small to medium size changes which you didn't foresee at the beginning. Changing a background or text colour, or experimenting with different styles for your links across the entire site, becomes a simple and painless process.

It was an annoying thing to have to learn after being so accustomed to 'the old way' of doing things, but now I really don't know how I ever got on without it.

forbairt

Pretty much the same response as Goodshape

I spent a good bit of time trying to get my head around CSS and now that I have I like to think I can pretty much mockup any design pretty quickly and as he said ... making that one change to a css file which is echoed throughout your site is a godsend

dkell

No bother! Good to hear it worked out for you.