Hello again davm22,
Your off to a great start really - don't give up yet.
When you specify an anchor like this #navbar a:link, a:visited { you apply the styling to both #navbar a:link and all visited a's.
Does that make sense?
Your CSS should look more like this:
#navbar a:link, #navbar a:visited {
display: block;
width: 120px;
font-weight:bold;
color: #fff;
background: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
That way it applies the styles to the visited anchor in #navbar only. Instead of all visited anchors like you originally had it.
Have a look at this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#navbar li {float: left;}
#navbar a:link, #navbar a:visited {
display: block;
width: 120px;
font-weight:bold;
color: #fff;
background: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
#navbar a:hover, #navbar:active {background: #7A991A;}
#footer {
text-align: center;
background: #ccc;
margin: 300px 0 0; /*delete this - it's just some top margin for display purposes*/
}
#footer a:link {
font-weight: bold;
text-decoration: underline;
color: #ffffff;
}
#footer a:visited {
font-weight: bold;
text-decoration: underline;
color: #990000;
}
#footer a:hover {
font-weight: bold;
text-decoration: none;
color: #ed1c24;
background: #ffff00;
}
</style>
</head>
<body>
<div id="container">
<div id="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<!--end navbar--></div>
<div id="footer">
<a href="index.html">Home</a> |
<a href="news.html">News</a> |
<a href="contact.html">Contact</a> |
<a href="about.html">About</a>
<!--end footer--></div>
<!--end container--></div>
</body>
</html>
Plenty of text only menus to look over here (http://nopeople.com/design/CSS%20tips/index.html).
p.s. The validator found an error or two in your CSS. Have a look at the links about validation in my sig below.
