Can you help me debug my Coding HTML?

Question

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.

Answer 1 · 2014-07-20T03:23:45Z

July 20, 2014 3:23am

Thanks for the HTML and CSS. :)

So a few quick notes for the CSS:

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>

Answer 2 · 2014-07-20T01:51:24Z

July 20, 2014 1:51am

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.

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.
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. :)

Answer 3 · 2014-07-20T03:03:22Z

July 20, 2014 3:03am

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>

Answer 4 · 2014-07-20T03:04:19Z

July 20, 2014 3:04am

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

Welcome to the Treehouse Community

Looking to learn something new?

Domnick Knowlton

Domnick Knowlton

Can you help me debug my Coding HTML?

wrapper {

logo {

Corey Montgomery

Corey Montgomery

Michael Hulet

Michael Hulet

4 Answers

Paul Sullivan

Paul Sullivan

Domnick Knowlton

Domnick Knowlton

Paul Sullivan

Paul Sullivan

Paul Sullivan

Paul Sullivan

Domnick Knowlton

Domnick Knowlton

Paul Sullivan

Paul Sullivan

Domnick Knowlton

Domnick Knowlton

Domnick Knowlton

Domnick Knowlton