Forum Moderators: not2easy
I'm having issues with a site navigation I'm building. I'd like to have the current page selected to have an underline, then all pages visited to have a line through.
To achieve this I've used an <ul> for the nav, giving the current <li> and "id", so the the selected page has the underline working fine.
The conflict has come when adding the a: visited{text-decoration: line-through;} this causes the current <li> to have a line-through & underline. I need to get rid of the line-through for the current selection.
I've included an example here; <>
Any help would be much appreciated.
Cheers
Paul
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
</title>
<style type="text/css" media="screen">
* {margin: 0;}
a {text-decoration: none; color: #000000;}li a:hover {color: #000;}
h2 {
font-family: courier;
font-size: 12px;
font-weight: normal;
text-transform: uppercase;
color: #E80068;
text-decoration: none;
margin-bottom: 10px;
}#wrapper {
clear: both;
position: relative;
}/*-- SIDE NAV --*/
#navigation {
width: 235px;
height: 600px;
padding: 5px 0px 0px 22px;
float: left;
position: fixed;
top: 35px;
z-index: 2;
background: #ffffff;
}#navigation h1 {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-weight: bold;
color : #CCCCCC;
font-size : 12px ;
}#navigation a:visited {text-decoration: line-through;}
#navigation a:hover {color: #E80068;}
#proj {text-decoration: underline;}
#navigation h2 {margin-top: 20px;}
#recent_projects {
font-family: Courier;
text-transform: uppercase;
display: inline;
font-size: 12px;
margin: 0px;
padding: 0px;
list-style-type: none;
line-height: 13px;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- start:Nav-->
<div id="navigation">
<h2>Recent Projects</h2>
<ul id="recent_projects">
<li><a href="proj01.html">Project 01</a></li>
<li><a href="proj02.html">Project 02</a></li>
<li><a href="proj03.html">Project 03</a></li>
<li><a href="proj04.html">Project 04</a></li>
<li><a href="proj05.html">Project 05</a></li>
<li><a href="proj06.html">Project 06</a></li>
<li><a href="proj07.html">Project 07</a></li>
<li><a href="proj08.html">Project 08</a></li>
<li><a href="proj09.html">Project 09</a></li>
<li><a href="proj10.html">Project 10</a></li>
</ul>
</div>
<!-- end: Nav-->
</div>
</body>
</html>
[edited by: SuzyUK at 8:25 pm (utc) on July 1, 2008]
[edit reason] uri removed, examplified code added [/edit]
Just adding;
#proj a:visited {text-decoration: none;}
Seems to work. I haven't tested it in all browsers, so not to sure about total compatibility.
Any feedback welcome.
Cheers
Paul
