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 trialTy Jarrett
3,476 PointsMy twitter name wont show up
In both about and contact page my twitter name is invisible but if i highlight it i can see it. What could be the problem
Ty Jarrett
3,476 PointsI thought it would be a problem with the color of the links but both my email and phone number do show up. And when i loaded the contact page for first time it was there then clicked it to make sure it works and its invisible now> When I click the other links that does not happen
Ty Jarrett
3,476 Points/********************
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%;
}
h3 {
margin: 0 0 1em o;
}
/********************
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:PORFOLIO
*********************/
#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 links*/
nav a, a:visited {
color: #fff;visited
}
/*secected nav link*/
nav a.selected, nav a:hover {
color: #32673F;
}
Ty Jarrett
3,476 PointsOnce again thank you both so much
12 Answers
marsha grasett
9,995 Pointsit's the comma after nav a------ making a:visited a seperate item not part of the nav a
nav a, a:visited
Ty Jarrett
3,476 PointsOh okay so that's the problem then I didn't think it would be because in his video he also clicked the twitter link and it didn't disappear and I thought we had the same CSS but i guess not. Thank you!
Ty Jarrett
3,476 PointsI removed the visited color and yes it works I feel like i should have known that myself but the whole nav links comment i did in another video threw me off
marsha grasett
9,995 PointsIt would help if you post the code.
Jason Anello
Courses Plus Student 94,610 PointsPost the relevant html and css if you can.
I can only guess right now that the color of your twitter name matches the background color.
If your web pages are live and can be viewed then post the link and you can probably get better help.
marsha grasett
9,995 PointsCan you post the link to your site?
Ty Jarrett
3,476 PointsI didn't put it online yet im still working on it
marsha grasett
9,995 Pointswhen you click on it it disappears
/*nav links*/
nav a, a:visited {
color: #fff;visited
}
so it's a visited - and it becomes white
Is your background white as well?
Ty Jarrett
3,476 PointsNope its not part of the nav its in the "section" the background is white but the twitter name is the only link to have a problem
Ty Jarrett
3,476 PointsI took a screen shot of my page and uploaded it as my profile pic
Jason Anello
Courses Plus Student 94,610 PointsYou beat me to it.
Yes, it does look like the background is white.
Also, you should not have "visited" after your semicolon when setting the color.
You can run your pages through the validators at w3c and I believe they can give warnings when you have foreground and background colors the same.
Ty Jarrett
3,476 PointsOh yea i never realized that "visited" was there. I'm going to try w3c because i don't understand, I have not done any styling to that page yet maybe that's the problem but I also don't understand why its the only link doing it. I thank both of you's for taking the time to help me out
marsha grasett
9,995 PointsCan you post a link to your site? Is it live?
Ty Jarrett
3,476 PointsNo its not live all i can do is screen shot but you cant seem to see it in my profile pic
James Barnett
39,199 PointsIf it's not yet live, make a codepen
marsha grasett
9,995 Pointsand ...."twitter name is the only link to have a problem"
isn't that the only real link?
Jason Anello
Courses Plus Student 94,610 PointsThe email could be a link. If the email is a link, try clicking on that one too and see if it disappears like the twitter name.
Or temporarily make it a mailto: link if it isn't and see if the same thing happens.
Jason Anello
Courses Plus Student 94,610 PointsYou mentioned that it disappeared after you clicked on it. This would make it a visited link and as Marsha mentioned, you have css that is setting it to white.
I would remove the error in your css that I mentioned if you haven't already in case that's causing any trouble.
Please post you entire list code for that part with your number and email included so we can see the full <ul>
code.
Also, in your original html posting you have a p
element right after your li
element. You should only have list elements inside your ul
Ty Jarrett
3,476 PointsWith the ul problem u just mentioned is only because i just copied only those two problem lines. I do see where the links are set to whit after visit but i thought that's only for the nav
Jason Anello
Courses Plus Student 94,610 PointsIf you want visited links in the nav to be white then you would have to do something like this:
/*nav links*/
nav a, nav a:visited {
color: #fff;
}
Notice that I added nav
in front of a:visited
. With the way you had it before, all visited links would become white. Now it's only visited links within a nav.
Ty Jarrett
3,476 PointsOh ok i see now
Ty Jarrett
3,476 Points<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ty Jarrett | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/design1.css">
</head>
<body>
<header>
<a href="design1.html" id="logo">
<h1>Ty Jarrett</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="design1.html">Portfolio</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 currently looking for new design work, If you have any questionns, please don't hesitate 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"></ul>
<li class="phone"><a href="tel:484-264-3382">484-264-3382</a></li>
<li class="mail"><a href="mailto:tjarrett.web@gmail.com">tjarrett.web@gmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=timmyty33">@timmyty33</a></li>
</section>
<footer>
<a href="http://twitter.com/timmyty33"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/timmyty33"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Ty Jarrett.</p>
</footer>
</div>
</body>
</html>
Jason Anello
Courses Plus Student 94,610 PointsYour closing <ul>
tag in Contact Details should come after the 3 list items.
Ty Jarrett
3,476 Pointsoic yea fixed that to just never really got to it i finished the list items and loaded the page and seen i had an issue
marsha grasett
9,995 PointsI could be wrong :-)
marsha grasett
9,995 PointsThis is from the video:
/* nav link */
nav a, nav a:visited {
color: #fff;
}
Ty Jarrett
3,476 PointsOkay cool thanks after removing the visited state altogether ill go back and make it right. Thanks alot
Ian Hudson
13,457 PointsA tip to finding text that is the same color as your background (rendering it invisible) is to hold down your mouse button while moving it over the area you suspect may have this issue. You will see that it will change your background color and reveal your text. Just a troubleshooting tip.
Hope that helps.
Ian
Ty Jarrett
3,476 PointsTy Jarrett
3,476 Points<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=timmyty33">@timmyty33</a></li> <p>If you'd like to follow me on twitter, my username is <a href="http://twitter.com/timmyty33">@timmyty33</a></P>