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
Vladimir Miletic
6,201 Pointsnone of contact links work?
When I put cursor on email, phone number or twitter the narrow does not change a shape as it suppose to be when you put a cursor on linked email, phone number or twitter username.
5 Answers
Ben Dietrich
8,287 PointsVladimir, it might be even simpler than that. I noticed in your code, href is misspelled. Fix that and you should be good to go!
I found it here:
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a herf="tel:555-6425">555-6425</a></li>
<li class="mail"><a herf="mailto:vladimirm82@yahoo.com.com">vladimirm82@yahoo.com</a></li>
<li class="twitter"><a herf="http://twitter.com/intent/tweet? screen_name=vladda22">@vladda22</a></li>
</ul>
Zach Saul
11,156 Pointscan you attach your code so I can glance at it?
Vladimir Miletic
6,201 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vladimir Miletic | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1> Vladimir Miletic</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<h3>General Information</h3>
<p> I am not currently locking for new design work. I am avaiable for speaking gigs and simular engagements. If you have any question please do not heistate to contact me. </p>
<p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me. </p>
</section>
<section>
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a herf="tel:555-6425">555-6425</a></li>
<li class="mail"><a herf="mailto:vladimirm82@yahoo.com.com">vladimirm82@yahoo.com</a></li>
<li class="twitter"><a herf="http://twitter.com/intent/tweet? screen_name=vladda22">@vladda22</a></li>
</ul>
</section>
<footer>
<a href="http://twitter.com/vladda22"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/VladimirMilettic"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Vladimir Miletic.</p>
</footer>
</div>
</body> </html>
Zach Saul
11,156 PointsOK, great! now let me see your CSS.main and i should be able to find your error
Zach Saul
11,156 Pointsmain.css*****
Vladimir Miletic
6,201 Points/**************** GENERAL *****************/ body { font-family:'Open Sans', sans-serif; }
wrapper {
max-width: 9480px; margin: center ; padding:0 5%; }
a { text-decoration: none; }
img { max-width: 100%;
} h3 { margin: 0 0 1em 0; }
/************************** HEADING ***************************/
header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: center; }
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.75wm; 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 }
/************************** PAGE: ABOUT ***************************/
.profile-photo { display:block; max-width:150px; margin: 0 auto 30px; border-radius:100%;
}
/************************** COLORS **************************/
/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; }
Vladimir Miletic
6,201 Points/**************** GENERAL *****************/ body { font-family:'Open Sans', sans-serif; }
wrapper {
max-width: 9480px; margin: center ; padding:0 5%; }
a { text-decoration: none; }
img { max-width: 100%;
} h3 { margin: 0 0 1em 0; }
/************************** HEADING ***************************/
header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: center; }
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.75wm; 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 }
/************************** PAGE: ABOUT ***************************/
.profile-photo { display:block; max-width:150px; margin: 0 auto 30px; border-radius:100%;
}
/************************** COLORS **************************/
/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; }
Zach Saul
11,156 PointsOk - so you anly have 1 hover statement in your CSS: which applies to the navigation and not your contact list items:
if you wanted to include a hover action for your contact list items just write:
ul.contact-info li:hover { *make your changes here*}
this selects the list items who are descendants of the unordered list with the class "contact info" and tells the browser to apply to following changes when the mose hovers onto those elements.
it's been awhile since i did this course so it depends on what they want you to do but to change their shape your likely going to use border radius:
ul.contact-info li:hover { border-radius: whatever you want to change it to; }
Vladimir Miletic
6,201 Pointsguys, thank you so much! It works now!
Zach Saul
11,156 PointsZach Saul
11,156 Pointshaha yup, that will do you you in for sure. can't believe i missed that.