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

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

Posted by William Herold
William Herold
772 Points

<a href ....

I'm stuck on lesson 7. I have provided the exact same syntax as provided in the example and I don't get the hyperlink to twitter in my "about" page...

<section> <img src="img/bill.jpg" alt="Photograph of Bill Herold" class="profile-photo"> <h3>About</h3> <p>Hi folks. This is my first attempt at a webpage. I've been at it now for a short period of time and so far I am having a blast. Whoever knew that coding could be so much fun? When I'm not coding, you can find me talking Vintage Star Wars with all the cool kids. Sometimes I'll even exercise.</p> <p>If you'd like to follow me on Twitter, contact me <a href= "http://twitter.com/surfing">@surfing</a>.</p> </section>

5 Answers

Liz Laffitte
Liz Laffitte
23,691 Points

This is your culprit: 

 a { color:#fff; }

It is making your link white so that it blends in to the background. Make this any other color and you're golden. :)

William Herold
William Herold
772 Points

Gold Star to Elizabeth!! Thank you!!

Liz Laffitte
Liz Laffitte
23,691 Points
Liz Laffitte
Liz Laffitte
23,691 Points

William,

I tested the code and it worked for me. What do you mean you don't get the hyperlink? Do you mean it's not underlined like you would expect or that it doesn't take you to your twitter account?

My guess is that there's something in your CSS affecting your anchor tags.

William Herold
William Herold
772 Points

Hi Elizabeth,

So when I save the code and "compile" it for lack of better words to see how it looks, my "about" page has everything up to contact me it then has a space where the hyperlink to twitter defined in my file as @surfing should show up. It physically shows up as an empty space followed by the period at the end of the sentence.

Bill

Liz Laffitte
Liz Laffitte
23,691 Points
Liz Laffitte
Liz Laffitte
23,691 Points

That sounds like a display:none that is affecting your links. Or it could be a color: that is making them blend in with the background.

Could you post your CSS so that I could have a look?

William Herold
William Herold
772 Points

/********************** General **********************/

body { font-family: 'Crimson Text', 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: 'IM Fell English', sans-serif; margin: 15px 0; font-size: 1.75 em; font-weight: normal; line-height: 0.8em; }

h2 {

font-size: .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: 700; 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: About **********************/

.profile-photo { display: block; max-width: 350px; margin: 0, auto, 30px; border-radius: 20%; }

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

}

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

/* nav links */ nav a, nav a: visited { color: #000; }

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

Liz Laffitte
Liz Laffitte
23,691 Points
Liz Laffitte
Liz Laffitte
23,691 Points

Also, a good way to figure out what CSS is specifically affecting certain parts of your code is to preview it in the browser.

This is how I figured it out:

  1. First hit (on a PC) ctrl+shift+j to bring up the developers tools in Chrome
  2. Select "elements"
  3. Find the broken code (you can use the magnifying glass and then click on the affected area to make it easier)
  4. Select the styles tab to see what CSS styles are affecting it that part of your code
  5. Change the values right there in the preview to test it
William Herold
William Herold
772 Points

Thank you I'm downloading Google Chrome now... That sounds impressively powerful at troubleshooting. Outstanding idea!! How long have you been learning this stuff?

William Herold
William Herold
772 Points
William Herold
William Herold
772 Points

I sent a friend request on FB because I have an immense amount of questions. Not a stalker married guy, baby girl on the way.