Help - CSS in nav

K

kayla

New Member
I run into this issue with almost every site I build, and half the time it magically fixes itself and half the time it doesn't. I have a nav with black text, the hover is a purplish colour, and I want the "current" page to have the purplish colour too. The issue is that the "current" page text stays black, not the purple I want it to be. Arrrgggg. Any ideas? I don't care about comments regarding the rest of my code, it's just this one issue I'm looking for feedback on. Thanks!

HTML:
Code: 
<div id="nav">
<ul>
<li id="current"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Whatever</a></li>
<li><a href="#">Whatever</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>                    
</div><!--/nav-->

(I've put the id="current" in the li as well as the a, and get the same result both times)

CSS:
Code: 
#nav ul li a{
color:#000;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-weight:bold;
}
	
#nav ul li a:hover{
color:#5959ab;
}

#current{
color:#5959ab;
}
 
CaldwellYSR

CaldwellYSR

Member
In the body tag of each page put an id. Then put an id on each li. should look like this.


<body id="home">
<div id="nav">
<ul>
<li id="nav_home"><a href="#">Home</a></li>
<li id="nav_about"><a href="#">About Us</a></li>
<li id="nav_whatever1"><a href="#">Whatever</a></li>
<li id="nav_whatever2"><a href="#">Whatever</a></li>
<li id="nav_faq"><a href="#">FAQ</a></li>
<li id="nav_contact"><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
Click to expand...

then in the css you'll want to change the color of the active one. I do them all at the same time like this:

body#home li#nav_home,

body#about li#nav_about,

body#whatever1 li#nav_whatever1,

body#whatever2 li#nav_whatever2,

body#faq li#nav_faq,

body#contact li#nav_contact {color: #5959ab;}
Click to expand...

I hope that makes sense. I put an extra space in the css code to make it more readable but you wouldn't really need that in your code.
 
Last edited:
K

kayla

New Member
That seems like far too much to do for something so simple. Thanks for your help though!

I just tried changing my CSS to this (and it worked!):

Code: 
#wrapper #nav ul li #current{
color:#5959ab;
}
 
CaldwellYSR

CaldwellYSR

Member
I've always found that fix to be too inconsistent but if it works for you go for it :) Sorry my way was a little long-winded.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
@kayla
what you've done is correct
@caldwell
what you've done is make them ALL purple.
 
CaldwellYSR

CaldwellYSR

Member
Phreaddee said:
@kayla
what you've done is correct
@caldwell
what you've done is make them ALL purple.
Click to expand...

No it makes them purple when you're on the page with that body tag... so if you're on the page with body#home then the li#nav_home will be purple...

EDIT: although looking at it her way makes sense and is shorter.... Learn something new everyday.
 
Last edited:
B

brandontw

New Member
whats wrong with just using a div, then classes within? like so:
Code: 
<div id="menu">
		<ul class="avmenu">
			<li><a href="index.html">HOME</a></li>
			<li><a href="services.html">SERVICES</a></li>
			<li><a class="current" href="products.html">PRODUCTS</a></li>
			<li><a href="contact.html">CONTACT</a></li>
			<li><a href="about.html">ABOUT</a></li>
			<li><a href="news.html">NEWS</a></li>
			<li><a href="other.html">other</a></li>
		</ul>
	</div>

then your css will look like this (this is one from my stuff,so theres extra styling... but yeah...)

Code: 
#menu {
width:1000px;
float:left;


}
#menu ul.avmenu li {
display:inline; 

}
#menu ul.avmenu li a {
display:block;
height:28px;
width:140px;
letter-spacing:1px; 
color:#000000; 
font-weight:400;
float:left; 
font-size:130%;  
padding:11px 0px 0px 0px;  
text-align: center;
border:1px solid black;
}

#menu ul.avmenu li a:hover {
    background: #fad323;
color:#000000;
}

#menu ul.avmenu li a.current {
background: #FAC823;
color:#000000;
}
 
You must log in or register to reply here.
Top