css list Q
- Started
- Last post
- 6 Responses
- JamesBoynton
Hello
Im trying to get my head around css lists, ive got a simple list here - www.jamesrobertedward.com/test
and what i want to do it highlight the page i am on, i want to do it manually and id like it to take change the whole background colour to say yellow... but i cant work out how to do it.
At the moment the rollover is a dark grey but its just how to highlight a single bit that im having the problem with. The css is within the html doc
cheers
james
- flavorful0
There is a little more to it than just CSS. A List Apart is a great resource:
http://www.alistapart.com/
- iwlyfel0
your going to have to explain yourself better than that
are you wanting the page background color to change?
or do you want to have a "current" state? where you can indicate with page you are on by changing the color of the corresponding nav item
try to make more sense and i can help you
- flavorful0
Yes, you are going to have to use Class tags to distinguish what should show up and when. If you want the page you are on to show up differently, you have to identify it in the page itself when it is generated not necessarily with "CSS" solely.
Further explanation on what you need will hopefully get more people on teh same page as you, as to what exactly you want to have happen.
- JamesBoynton0
Hi Guys
Cheers for the response, sorry for my vagueness was rushing for the bloody bus!
Ok, so basically if i go to a page i would like to go into the html on that page and change the background colour on that <li> from black to yellow, so say i was on the page sub (first one) i would like to be able to change the background colour between the white line above and white line below to to yellow. Hope that makes sense, basically i just want to highlight where you are by changing the background and possibly the text colour.
- Stugoo0
by the looks of your styling it should be something like...
#navcontainer ul li ul li a:hover { background-color:#ff0000; }
if
<div id="navcontainer">
<ul>
<li><a href="#">Page</a>
<ul>
<li><a href="#">Sub-page</a></li>
<li><a href="#">Sub-page</a></li>
</ul>
</li></ul>
</div>
- Stugoo0
sorry that should be,
#navcontainer ul li ul li a:active { background-color:#ffff00; }