8 replies [Last post]
bryceray1121
Offline
Regular
Last seen: 11 years 37 weeks ago
Timezone: GMT-6
Joined: 2007-06-15
Posts: 17
Points: 2

I'm not quite sure what i am doing wrong but i am sure it is an easy fix. I want to have my navigation setup so that the current page is displayed a little differently in the navigation. However, i can't seem to get those different styles to display.
Here is what i have so far:

Nav HTML:

<ul id="navigation">
				<li class="active"><a href="index.html">Home</a></li>
				<li><a href="about.html">About</a></li>
				<li><a href="hosting.html">Hosting</a></li>
				<li><a href="design.html">Design</a></li>
				<li><a href="design.html">Contacts</a></li>
			</ul>

Nav CSS:

 #navigation {
   list-style: none;
   margin: 0; 
   padding: 0;
   margin-top: 16px;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 12px;
   font-weight: bold;
 }
 
#navigation li {
   float: left;
   margin-left: 3px;
   text-decoration: none;
   border-bottom: 1px solid #ff9c00;
}
#navigation li a {
   display: block;
   background: #ffffff;
   text-align: center;
   color: #215086;
   padding: 10px 10px 10px 10px;
   text-decoration: none;
}
#navigation li a:hover {
   color: #ff9c00;
   text-decoration: none;
}
 
.active {
background-color: #215086;
color: #ffffff;
border-bottom: 1px solid #215086;
}

Thanks for your help.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 31 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Specificity.

Specificity.

Your active class doesn't have enough weight to override the previous rulesets.

try:

#navigation .active {
    background: #215086;
    color: #fff;
    border-bottom: 1px solid #215086;
}

bryceray1121
Offline
Regular
Last seen: 11 years 37 weeks ago
Timezone: GMT-6
Joined: 2007-06-15
Posts: 17
Points: 2

That allowed the border to

That allowed the border to come through. However the text color and background-color still will not change.

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 11 years 2 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

are you applying the class

are you applying the class to your anchor or the li?

You will need to use the same hook specified above (wolfcry), only you should add in more selectors like:

#navigation li a.active {
    background: #215086;
    color: #fff;
    border-bottom: 1px solid #215086;
}

or

#navigation li.active {
    background: #215086;
    color: #fff;
    border-bottom: 1px solid #215086;
}

mattrossidesigns.com

bryceray1121
Offline
Regular
Last seen: 11 years 37 weeks ago
Timezone: GMT-6
Joined: 2007-06-15
Posts: 17
Points: 2

still didn't make any

still didn't make any difference.
How should i be applying the class - currently it is just on the li.

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 11 years 2 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

I do not see how this

I do not see how this wouldnt work.

Can you please provide a link, and your updated css and all of your html

thanks

mattrossidesigns.com

bryceray1121
Offline
Regular
Last seen: 11 years 37 weeks ago
Timezone: GMT-6
Joined: 2007-06-15
Posts: 17
Points: 2

url:

url: http://www.eliteclanhosting.com/statscript/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Elite Clan Hosting.com - Clan Match Statistics Tool</title>
<link rel="stylesheet" href="css/mainstyle.css" type="text/css" />
<link rel="stylesheet" href="css/formstyle.css" type="text/css" />
 
</head>
<body>
<div id="pagewidth" >
	<div id="header" >
		<div id="banner"><img src="images/banner.jpg" border="0" alt="Elite Clan Hosting" /></div>
		<div id="nav">
 
			<ul id="navigation">
				<li class="active"><a href="index.html">Home</a></li>
				<li><a href="about.html">About</a></li>
				<li><a href="hosting.html">Hosting</a></li>
				<li><a href="design.html">Design</a></li>
				<li><a href="design.html">Contacts</a></li>
 
			</ul>
		</div>
		</div>
 
			<div id="wrapper" class="clearfix" > 
		<div id="twocols" class="clearfix"> 
		<div id="maincol" >
		<h4>View Clans: </h4><br />
		</div>
 
 
<h4><a href='viewclan.php?id=1'>Team eXigence</a></h4>			<div id="rightcol" >
			<h4 class="topborder"><a href="numberplayers.php">Input New Match</a></h4>
			</div>
 
 
</div>
</div>
<div id="footer">
<h6>&copy; 2008 EliteClanHosting.com</h6>
</div>
 
</body>
</html>

html, body{ 
 margin:0; 
 padding:0; 
 text-align:center; 
 background:#031f35 url(../images/bg.jpg) repeat-x;
 color: #ffffff;
} 
 
#pagewidth{ 
 width:80%; 
 text-align:left;  
margin-left:auto; 
 margin-right:auto;  
} 
 
#header{
 position:relative; 
 height:177px; 
 width:100%;
} 
 
#rightcol{ 
 float: right; 
 display:inline; 
 position: relative; 
 width: 25%; 
 border-left: 2px dotted #99b7d9;
 
 }
 
 #maincol {
 
 }
 
#footer{
 height:60px; 
 clear:both;
 } 
 
 #banner {
 
 }
 
 #nav {
 
 }
 
 #navigation {
   list-style: none;
   margin: 0; 
   padding: 0;
   margin-top: 21px;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 12px;
   font-weight: bold;
 }
 
#navigation li {
   float: left;
   margin-left: 3px;
   text-decoration: none;
   border-bottom: 1px solid #ff9c00;
}
#navigation li a {
   display: block;
   background: #ffffff;
   text-align: center;
   color: #215086;
   padding: 10px 10px 10px 10px;
   text-decoration: none;
}
#navigation li a:hover {
   color: #ff9c00;
   text-decoration: none;
}
 
#navigation a.active {
background-color: #215086;
color: #ffffff;
border-bottom: 2px solid #215086;
}
 
 /* *** Float containers fix:
 <a href="http://www.csscreator.com/attributes/containedfloat.php" rel="nofollow">http://www.csscreator.com/attributes/containedfloat.php</a> *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  
 
 
 
 /*printer styles*/ 
 @media print{ 
 
/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}
 
 
 
 h3 {
 
 }
 
 h4 {
 	margin: -3px 0 0 0;
 }
 
 .title {
 
	font-weight: bold;
	border-bottom: 2px solid #0033FF;
	margin-bottom: 6px;
 }
 
 .box {
 	color: #1d4a7c;
 	border: 1px solid #dfe9f1;
	background-color:#99b7d9;
	padding: 10px 10px 10px 10px;
	width: 75%;
	margin-bottom: 4px;
 }
 
a:link, a:visited{
	color: #2566ac;
	text-decoration:none;
	}
 
a:hover, #active{
	color: #ff9c00;
	text-decoration:none;
	}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 31 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

sorry, I didn't look closely

sorry, I didn't look closely enough at your code.

You need to override the anchor style not the li

#navigation .active a {
    background: #215086;
    color: #fff;
    }

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 11 years 2 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

Fix that validation error

Fix that validation error you have there for starters, then add this in:

#navigation li.active a  {
background-color: #215086;
color: #ffffff;
border-bottom: 2px solid #215086;
}

Why were you trying to get to the .active through the anchor? You applied it to the li which comes before the anchor. Just be careful when it comes to selectors, it may be a good idea to refresh your memory on the basics of classes etc,.

Good luck

mattrossidesigns.com