I have created an active navigation bar that underlines the link for the page that you are currently on using PHP. My aim is for the link to appear underlined and in a different color. The underline works but the color doesn't change.
I have positioned the .on class,the class that the PHP will activate, after other applicable css styles so I don't think that there is any conflict. I even tried using !important to see if that had any affect but alas no.
header.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script><![endif]-->
<title><?php echo "LWM Marketing"; ?></title>
<link rel="stylesheet" type="text.css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<?=@$css;?>
</head>
<body>
<div class="wrapper">
<header>
<a class="header-logo" href="index.php"><h1 id="main-logo">LWM PR & Comms</h1></a>
<ul class="nav">
<li class="<?php if ($section == "index") { echo "on";} ?>"><a href="index.php">About</a></li>
<li class="<?php if ($section == "services") { echo "on";} ?>"><a href="services.php">Services and Previous Work</a></li>
<li class="<?php if ($section == "contact") { echo "on";} ?>"><a href="contact.php">Contact</a></li>
</ul>
</header>
<div id="content">
index.css
#content>*{
width:300px;
}
#content{
height:1025px;
}
h2{
font-family: 'Special Elite', helvetica, arial, verdana, sans-serif;
padding-left: 15px;
position: relative;
top:20px;
}
#linkedin{
position: relative;
top:30px;
left:5px;
}
#logo-cloud{
position: relative;
left:380px;
top:-150px;
width:600px;
}
#main-blurb{
font-family: 'Raleway', helvetica, arial, sans-serif;
font-size: 18px;
padding-left: 15px;
position: relative;
top: -125px;
width:600px;
}
#main-blurb p{
margin: 0px 0px 40px 40px;
text-indent: 15px;
width:600px;
}
#main-blurb p:last-child{
text-align: center;
font-size: 24px;
}
#divider{
width:960px;
position: relative;
top:-125px;
left:12px;
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #B6B8BA;
padding-top:15px;
}
#twitter-timeline{
position: relative;
top:-580px;
left:682px;
}
footer{
position: relative;
top:-30px;
}
.hidden{
display:none;
}
style.css (with the class that the PHP activates)
/* General Styling */
body{
font-family: 'Raleway', helvetica, arial, verdana, sans-serif;
background-image:url("images/paper.png");
}
.wrapper{
width:960px;
margin: auto;
}
a {
color:#000000;
text-decoration:none;
}
a:hover{
color:#434991;
}
a:active{
color:#FF9436;
}
/* Logo (Header) */
.header-logo{
display:block;
width:247px;
height:111px;
text-indent:-9999px;
background: url("images/logo.gif") no-repeat;
margin:15px 0px 10px 15px;
float:left;
position:relative;
left:40px;
}
/* Main-Nav */
.nav li{
list-style-type: none;
display:inline-block;
font-size: 23px;
margin-top:90px;
float:left;
position:relative;
left:25px;
top:-12px;
}
.nav a{
font-family: 'Special Elite', sans-serif;
padding-top:5px;
border-left: 1px dotted #878787 ;
padding:2px 5px 0px 30px;
}
.nav li:first-child a {
border: 0;
}
.on{
text-decoration:underline;
color:#FF9436;
}
/* Footer */
footer{
font-family: 'Special Elite', sans-serif;
width:100%;
float:left;
}
footer p{
display:inline;
}
footer div{
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #B6B8BA;
padding-top:15px;
}
footer div li{
list-style-type: none;
display: inline-block;
font-size: 15px;
margin-left: 80px;
}
footer div li p{
font-size: 12px;
}
Can anybody see why the color property is having no affect? Is it being overridden by something that I haven't noticed or is there something else that I am totally overlooking?
Thanks.
