Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ashvin Mbuguni
6,360 PointsMy nav links 'Portfolio About Contact' won't change colour when hovered over or selected.
Could someone help me as to where I have missed out the syntax here is the index.html and the main.css
<html>
<head>
<meta charset="utf-8">
<title>Ash Mbuguni | Front End Web Developer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Changa+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Ash Mbuguni</h1>
<h2>Front End Web Developer</h2>
</a>
<nav>
<ul>
<li>
<a href="index.html" class="selected">Portfolio</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with colour and texture</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Experimentation with kids logo</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Experimentation with belly butter logo</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Experimentation with colour and texture</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Experimentation with colour and texture</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/gunitunes">
<img src="img/twitter-wrap.png" alt="Twitter Logo" class"social-icon">
</a>
<p>© 2015 Ashvin Mbuguni</p>
</footer>
</div>
</body>
</html>
MAIN.CSS
/****************
GENERAL
****************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/****************
HEADING
****************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/****************
NAVIGATION
****************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/****************
FOOTER
****************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/****************
PAGE: PORTFOLIO
****************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size:0.75em;
color: #bdc3c7
}
/****************
COLOURS
****************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile */
nav {
background: #599a68;
}
/* logo text */
h1, h2 {
color:#fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a:selected, nav a:hover {
color: #32673f;
}
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Ashvin,
You have a problem in your css at the end:
/* selected nav link */
nav a:selected, nav a:hover {
color: #32673f;
}
You used a:selected but "selected" is a class in your html and should be preceded by a period.
Try nav a.selected
a:hover is ok because that's a pseudo class. You'll use colons with pseudo classes and periods with classes that you've put in your html.
eduardomejia2
Courses Plus Student 22,237 PointsYou should try this CSS:
nav ul li a:hover {
color: #32673f;
}
Ashvin Mbuguni
6,360 PointsWhere abouts should I add it? In the colors section of the CSS under the 'selected nav link'?
eduardomejia2
Courses Plus Student 22,237 PointsYes, under the "selected nav link", the best way to test CSS is to place the new code at the end of the CSS style sheet
Ashvin Mbuguni
6,360 PointsAshvin Mbuguni
6,360 PointsThank you Mr Anello, much appreciated!