navigation link colors problem
I cannot for the life of me figure out what I'm missing to change Navigation link color -- mainly .current class, but also a:hover, etc. I even tried adding overkill ".top ul li a:link, " contextual to selectors.
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Art of Ingrid Siliakus</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<meta name="description" content="Art of Ingrid Siliakus">
<meta name="keywords" content="Art of Ingrid Siliakus,paper craft">
<style type="text/css">
#slideshow { /* set to dimensions of the images - best for images all of the same dimensions */
width:1100px ;/*140px*/
height:480px ;/*225px*/
}
#slideshow img {
display: block;
position: absolute; margin-top:25px; margin-left:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<div class="logo">
<img src="image/page1/logo2.jpg" alt="logo lady" style="width:500px; height:85px">
</div><!-- closeLOGO-->
<ul>
<li><a href="#">Exhibition</a></li>
<li><a href="#">Art</a></li>
<li><a href="About.html">About</a></li>
<li><a href="#" class="current">Home</a></li>
</ul>
</div><!-- closetop -->
<div class="art">
<div id="slideshow">
<p> </p>
<img src="image/page1/page1_book.jpg" width="1100" height="480" alt="original" title="sketch" />
<img src="image/page1/page1_house.jpg" width="1100" height="480" alt="original" title="sketch" />
<img src="image/page1/page1_three.jpg" width="1100" height="480" alt="original" title="sketch" />
<img src="image/page1/page1_four.jpg"width="1100" height="480" alt="original" title="sketch" />
</div><!--closeSLIDESHOW-->
<script type="text/javascript">
var ssdiv = document.getElementById('slideshow');
var howlong = 3000;
function rotateimages(){
ssdiv.appendChild(ssdiv.getElementsByTagName('img')[0]);
setTimeout(rotateimages, howlong);
}
rotateimages();
</script>
</div><!--closeART-->
<footer>
<div class="bar"> 2015 Angela Chen Web final</div>
</footer>
</div>
</body>
</html>
Code:
@charset "UTF-8"
/* CSS Document */
html { margin:0; padding: 0;}
body {margin:0; padding: 0; color:#939597;font-family:Athelas-regular;font-size:14px; min-width:1200px; }
/* HTML5 block elements */
header, footer { display:block; clear:both;}<br>
.container{ width:1200px; position:relative; display:block; margin:10px auto; <br>
background: transparent; }<br>
nav { background-color:#E6E7E8; }
.top ul { list-style-type:none; margin-right:10px;margin:0;padding:0; float:left; width:50%; white-space:nowrap; }
.top ul li { display:inline; float:right; width:8em; text-align:center;}
.top ul li a {display:block; padding:20px 0; text-decoration:none; color:#A7A9AB; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:35px; line-height: 35px; font-weight:800;}<br>
.top ul li a:link, .top ul li a:visited { color:#A7A9AB; }
.top ul li a:hover, .top ul li a:focus, .top ul li a:active, { color:white; }
.top ul li .current {color:red;} /*#939597*/<br>
a { text-decoration:none; }
a:link { font-weight : normal; text-decoration : none; background: transparent; color:#A7A9AB; }
a:visited { color:#A7A9AB; }
a:focus, a:hover { text-decoration : underline overline; color: #F3C; }
a:active { background-color: #8899aa; }
.logo{float:left; padding: 0 0 0 10px;}
.top{background-color:#E6E7E8;height:85px; float:left; width: 100%; margin:0 auto; overflow:visible;}
.bar{font-size:9px;padding:15px;text-align:center;background-color:#e6e7e8;width:1200px;}
.art { positon: relative; height: 800px; }
.art img { padding:60px 60px 0px 50px; margin: 0 auto; display:block; }</p>
#main {width:1200px; position:relative; margin: 2px auto; display:block; }<br>
.left { float: left; width: 560px; padding: 0 2px; }<br>
.left p { text-align:left; padding:2px 10px; }<br>
.right { float: right; width: 480px; padding: 0 2px; background:#E6E7E8; color:black;height: 600px; }<br>
.right img { /*display:table-cell; vertical-align:middle; float:right; */ display:block; margin:2px auto; width:50%; }</p>
