navigation link colors problem

**auntnini** · 05-06-2015, 02:05 AM

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>&nbsp;</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 &quot;UTF-8&quot;
/* 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, &quot;Helvetica Neue&quot;, 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>

**Beverleyh** · 05-06-2015, 07:23 AM

Code:

.top ul li a.current { color: red; }

BTW - I'm not sure why you have HTML (breaks and closing paragraph tags) in your CSS, but you should remove them as they may be affecting things.

**auntnini** · 05-12-2015, 10:25 PM

Thanks Beverley. I missed that (when helping a "tutee"). Yes, no HTML or other language tags, etc. in CSS file. The mistake was in copying/pasting the code, which added the <p>s and <br>s.

What has me confounded is that we could not add a simple style rule class="current" to the <a href="#" class="current">link</a> without the "contextual" chain ? ? ? ? ?

What am I missing?

**jscheuer1** · 05-13-2015, 01:38 AM

If there are already contextual chains in play, unless you use the same or a more specific syntax, it's often possible that a prior contextual chain (because it's more specific) will actually override a later declaration made without regard to the contextual chain(s) already in use in the stylesheet. This is especially likely if a parent element in the chain is selected via its tag and/or class name. The id selector (because it's supposed to be unique) is usually less an issue here but can be. The a tag itself is also sometimes more prone to these sorts of things because it generally has more default styles than most other tags do.