Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Adding Pages to a Website Add a New Page

Jared Hensley
Jared Hensley
8,106 Points

Why does his twitter link in the about page show up but mine doesn't?

I went in added an idtag in the paragraph portion that has the anchor. I then referenced this idtag in my css file and changed the font color, I'm learning! But this isn't done in the video and his link shows up without doing this. However, it shouldn't! From the previous videos, we set the anchors to all be white, but now we are creating a link on a white background in the about page...seems like treehouse skipped over something here?

Jared Hensley
Jared Hensley
8,106 Points
/********************************
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;
}

/* link colors */
a {
  color: #fff;
}

#abouttwitter {
  color: #0000ff
}




/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
Jared Hensley
Jared Hensley
8,106 Points

the id tag that I added is #abouttwitter, this is allowing me to manually change the color of this one problem area. I'll also post my html code for the about page below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jared Hensley | Web Developer</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/main.css">

  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Jared Hensley</h1>
        <h2>Web Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/Jared.jpg" alt="Photograph of Jared Hensley" class="profile-photo">
        <h3>About</h3>
        <p> Hello! My name is Jared Hensley.  I am just beginning my journey into the world of web development and programming.  I am extremely self-motivated and have the ability to teach new concepts to myself and others.  I am graduating with a Bachelor of Science in Biology this summer; however, I also have a business background with degrees in finance and enjoy the detailed nuances of of a variety of subjects. Perhaps this is why I am drawn to programming! Outside of academia and a constant pursuit of new skills, I'm quite passionate about physical fitness.  I'm currently on track to start start physical therapy school this fall at the University of South Carolina, but things might be changing if all goes as plan ;) </p>
        <p>If you would like to follow me on Twitter, my username is <a href="http://www.twitter.com/jaredhensley732" id= "abouttwitter">@Jaredhensley732</a>.</p>
      </section>
      <footer>
        <a href="http://twitter.com/jaredhensley732"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/mcflyhensley"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Jared Hensley.</p>
      </footer>
    </div>
  </body>
</html>
Jared Hensley
Jared Hensley
8,106 Points

well, I just remembered that I changed the color of links in my css to white in order to make my navigation links white (they were showing up as a different shade of green). you can see that in my code in the follow section of css. But then the original problem still persists, why are my headings not white by default like how the instructor has his in the tutorial. This is all really helping me learn how css works with html so it's a good learning exercise for sure. Thanks!

/* link colors */
a {
  color: #fff;
}
Jared Hensley
Jared Hensley
8,106 Points

What I ended up doing was adding this and undoing everything else I changed, so now my code looks like the following and has everything working. Although it is slightly different by this one addition to the css:

nav ul li a {
  color: #fff;
}
/********************************
GENERAL
*********************************/

body {
  font-family: 'Open San', 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 0;
}


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

nav ul li a {
  color: #fff;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* link colors */
a {
  color: #6ab47b;
}

#abouttwitter {
  color: #0000ff
}




/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

1 Answer

Hi Jared, nice to heard that everything is working. Next time when you have problems like this that you have to share a lot of code, snapshot your workspace. It's easier for people to help you out.

If you don't know how to do it, here its a link: https://teamtreehouse.com/forum/workspace-snapshots

I hope you keep learning!