Bit of CSS Assistance?

Atomic

Atomic

Atomic

Associate
Joined
27 Jan 2005
Posts
830
I need to do something simple. To get the hyperlink to change colour on the current page of my website. The links work and all the active, and hover styles work - it's just this last part that's proving frustrating.



xhtml:

Code: 
<div id="footer">
            <ul>
            <li><a href="terms.html">Terms</a></li>
            <li><a href="privacy.html">Privacy</a></li>
            <li><a class="current"><a href="copyrightnotice.html">Copyright Notice</a></li>
            </ul>


CSS:

Code: 
* { padding: 0; margin: 0; }

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #D9D5B3;
}
h1 {
    font-family    : Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:#FFFF00;
    text-align: center;
    font-size: 16px
}
h2 {
    font-family    : Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size: 10px;
    }
#container { 
 margin: 0 auto;
 width: 900px;
 background-image: url(/images/shadow.jpg);
 background-repeat: repeat-y;
}
#header {
 width: 900px;
 float: left;
 height: 100px;
 background-image:url(/images/headertest.jpg);
}
#menubar {
 float: left;
 width: 900px;
 height: 25px;
 background-image:url(/images/menubg.jpg);
}
#leftcolumn { 
 height: 360px;
 width: 160px;
 float: left;
 padding: 20px;
}
#rightcolumn { 
 float: right;
 height: 360px;
 width: 660px;
 padding: 20px;
}
#footer {
    width: 900px;
    clear: both;
    height: 25px;
    background-image:url(/images/footer.jpg);
    color: #0000FF;
    font-weight: bold;    
    text-align: center;
}
#footer li {
    display: inline;        
    padding-left: 50px;
    text-decoration: none;    
}
#footer a:link { 
    color: #009F00;
    text-decoration: none;
}
#footer a:visited {
    color: #009F00;
    text-decoration: none;
}
#footer a:hover {
    color: #0000FF;
    text-decoration: none;
}
#footer a:active {
    color: #FF0000;
    text-decoration: none;
}
#footer .current {
    color: #FFFBF0;
    text-decoration: underline;
}
 
Code: 
<div id="footer">
            <ul>
            <li><a href="terms.html">Terms</a></li>
            <li><a href="privacy.html">Privacy</a></li>
            <li><a class="current" href="copyrightnotice.html">Copyright Notice</a></li>
            </ul>

Fixed. You had two opening anchor tags.
 
You must log in or register to reply here.
Back
Top Bottom