navigation link colors problem [Archive]

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.

<!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>
<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>

<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>
<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>

<footer>
<div class="bar"> 2015 Angela Chen Web final</div>
</footer>
</div>
</body>
</html>

@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>

Beverleyh

05-06-2015, 07:23 AM

.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.

auntnini

05-19-2015, 09:39 PM

Thanks for the information.