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

HTML How to Make a Website Adding Pages to a Website Build the Contact Page

My 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

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

I 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

/********************
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;
} 

Once again thank you both so much

12 Answers

marsha grasett
marsha grasett
9,995 Points

it's the comma after nav a------ making a:visited a seperate item not part of the nav a

nav a, a:visited

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

I 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
marsha grasett
9,995 Points

It would help if you post the code.

Post 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
marsha grasett
9,995 Points

Can you post the link to your site?

I didn't put it online yet im still working on it

marsha grasett
marsha grasett
9,995 Points

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

Nope 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

I took a screen shot of my page and uploaded it as my profile pic

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

Oh 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
marsha grasett
9,995 Points

Can you post a link to your site? Is it live?

No its not live all i can do is screen shot but you cant seem to see it in my profile pic

James Barnett
James Barnett
39,199 Points

If it's not yet live, make a codepen

marsha grasett
marsha grasett
9,995 Points

and ...."twitter name is the only link to have a problem"

isn't that the only real link?

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

You 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

With 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

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

Oh ok i see now

<!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>&copy; 2014 Ty Jarrett.</p>
        </footer>
    </div>
</body>
</html>

Your closing <ul> tag in Contact Details should come after the 3 list items.

oic 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
marsha grasett
9,995 Points

This is from the video:

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

Okay cool thanks after removing the visited state altogether ill go back and make it right. Thanks alot

Ian Hudson
Ian Hudson
13,457 Points

A 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