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.

HTML

Domnick Knowlton
Domnick Knowlton
1,904 Points

Can you help me debug my Coding HTML?

The problem is with attribute of the "A" tag with the class of the "Selector" When I remove the class it removes the members link in general but if I keep it, it renames the members link to the Class code. Now, I think it is the HTML code, but, it did not mess up until I was messing with the Body tag in CSS. So I will provide both of the code

Now for the CSS

/********************** GENERAL ***********************/ body { font-family: 'Unkempt', cursive; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

/********************** HEADING ***********************/

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Devonshire', cursive; 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; }

/********************** Footer ***********************/ footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc; }

/********************** Navigation ***********************/ nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

/********************** Colors ***********************/

body { background-color: #fff; color: #999; }

header { background: #6ab47b; border-color: #599a68; }

nav { background: #599a68; }

h1, h2 { color: #fff; }

a { color: #6ab47b; }

nav { background: #599a68; }

nav a, nav a:visited { color: #fff; }

nav a.selected nav a: hover{ color: #32673f; }

I know this is a lot of code so I would like to say thanks in advance.

Corey Montgomery
Corey Montgomery
18,054 Points

Try using the forums Markdown Cheatsheet for adding code and re-paste the HTML portion. Will be much easier seeing the code to find out what is going on.

Michael Hulet
Michael Hulet
47,842 Points

Try pasting your code in again, but use the template below:

HTML:

```html

<!-- Paste all your HTML here -->

```

CSS:

```css

/* Paste all your CSS here */

```

4 Answers

Paul Sullivan
Paul Sullivan
7,876 Points

Thanks for the HTML and CSS. :)

So a few quick notes for the CSS:

  1. Make sure you use the correct selectors when referring to either a class or id. For example you have:
<div id="wrapper">

Which is totally fine. However the issue is then with your CSS. You'll want to change

.wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

To this:

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

Note that a . (period) in front of wrapper makes it refer to a class, not an id. You'll want to change it to the # (hashtag) in order to make it refer to an id.

Also, be sure and add the comma to separate two different references in the same line. Example in your code:

nav a.selected nav a:hover {
    color: #32673f;
}

(Take note of where we'll want to place the comma to separate the two different selectors)

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

Basically, in what you have, you're telling the CSS to find nav, then a of .selected then to look for nav again (WITHIN .selected) with an a with a hover state. Adding the comma will make it look for nav, then a of .selected AND nav, with an a in a hover state.

Now, onto the real issue at hand. You're not seeing the changes to .selected, because... well.. it simply isn't in the html yet. :) To add it, you'd want to do something like this:

<nav>
        <ul>
            <li><a href="index.html" class="selected">Members</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
</nav>
Domnick Knowlton
Domnick Knowlton
1,904 Points

Resolved, thank you for your time.

Paul Sullivan
Paul Sullivan
7,876 Points

I can't quite make out your HTML to the extent that we'd want to be able to in order to check it over correctly, but I ran your CSS through http://html.fwpolice.com/css/ to clean it up a bit. Here is a cleaner view of it all. :)

/********************** GENERAL ***********************/ 
body {
    font-family: 'Unkempt', cursive;
}

wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

a {
    text-decoration: none;
}

/********************** HEADING ***********************/

logo {
    text-align: center;
    margin: 0;
}

h1 {
    font-family: 'Devonshire', cursive;
    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;
}

/********************** Footer ***********************/
footer {
    font-size: 0.75em;
    text-align: center;
    padding-top: 50px;
    color: #ccc;
}

/********************** Navigation ***********************/
nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

/********************** Colors ***********************/

body {
    background-color: #fff;
    color: #999;
}

header {
    background: #6ab47b;
    border-color: #599a68;
}

nav {
    background: #599a68;
}

h1, h2 {
    color: #fff;
}

a {
    color: #6ab47b;
}

nav {
    background: #599a68;
}

nav a, nav a:visited {
    color: #fff;
}

nav a.selected nav a: hover {
    color: #32673f;
}

There are a few things that I can point out in the CSS alone without looking at the HTML.

  1. You'll need to make sure you are identifying your selectors properly. So for "logo" and "wrapper" you'll want to make sure you set them to ".logo" for a class or "#logo" for an id. Same with your wrapper.

  2. At the end where you select the hover state, be sure and remove the space after the colon for the pseudo class of hover. Also be sure and separate the selectors properly. So instead of:

nav a.selected nav a: hover {
    color: #32673f;
}

/******** You'll want this below instead ********/

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

Hope that helps. :)

EDIT: After rereading your post, since we're seeing "class="selected"", this would mean that it is not being read as html and simply as normal text. I'd say it's just not nested properly, which is why the changes aren't taking effect as you'd expect them to. :)

Domnick Knowlton
Domnick Knowlton
1,904 Points

Then how do I put it in right?

Paul Sullivan
Paul Sullivan
7,876 Points

Check out the post just before my own. :) You can also click the link just below the box where you post text that says "Markdown Cheatsheet".

Domnick Knowlton
Domnick Knowlton
1,904 Points

HTML:

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>COD MLG Clan</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link href='http://fonts.googleapis.com/css?family=Kalam:400,700,300|Devonshire' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Unkempt:400,700' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <header>
        <a href = "index.html" id="logo">
          <h1>RIZE Gaming</h1>
          <h2>MLG Clan</h2>
        </a>
        <nav>
          <ul>
            <li><a href="index.html">Members</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </header>
      <div id="wrapper">
        <section>
          <ul>
            <li>
              <a href="Images/Ballista.jpg">
                <img src="Images/Ballista.jpg" alt="">
                <p>This is a photo of the Black OPS II Marksmen rifile "Ballista."<p>
              </a>
            </li>
            <li>
              <a href="Images/HeadShot.jpg">
                <img src="Images/HeadShot.jpg" alt="">
                <p>This is a photo of a clan member of a quickscope headshot,<p>
              </a>
            </li>
            <li>
              <a href="Images/QuickScope.jpg">
                <img src="Images/QuickScope.jpg" alt="">
                <p>This is just more quickscoping.<p>
              </a>
            </li>
            <li>
              <a href="Images/RUSH.jpg">
                <img src="Images/RUSH.jpg" alt="">
                <p>This is a photo of a member rushing with the DSR<p>
              </a>
            </li>
            <li>
              <a href="Images/XPR.jpg">
                <img src="Images/XPR.jpg" alt="">
                <p>This is a photo of the Black OPS II Marksmen rifile "XPR-50."<p>
              </a>
            </li>
          </ul>
        </section>
        <footer>
        <a href="http://www.se7ensins.com/forums/"><img src="Images/se7.png" alt="Se7enSins"></a>
        <a href="https://www.facebook.com/Se7enSins"><img src="Images/facebook.png" alt="FaceBook"></a>
        <p>&copy; 2014 Domnick Knowlton.</p>
      </footer>
      </div>
    </body>
  </html>
Domnick Knowlton
Domnick Knowlton
1,904 Points

CSS:

/**********************
        GENERAL
***********************/
body {
  font-family: 'Unkempt', cursive;
}

.wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

/**********************
        HEADING
***********************/

.logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Devonshire', cursive;
  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;
}


/**********************
        Footer
***********************/
footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}


/**********************
        Navigation
***********************/
nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}


/**********************
        Colors
***********************/

body {
  background-color: #fff;
  color: #999;
}

header {
  background: #6ab47b;
  border-color: #599a68;
}

nav {
  background: #599a68;
}

h1, h2 {
  color: #fff;
}

a {
  color: #6ab47b;
}

nav {
  background: #599a68;
}

nav a.nav a:visited {
  color: #fff;
}

nav a.selected nav a:hover{
  color: #32673f;
}