Stuck in HTML/CSS. Not sure what is wrong and why it doesn't look right. Colors not showing up, things not working, etc

Question

Seriously. I have no clue. Please help.

Answer 1 · 2015-06-14T04:56:59Z

June 14, 2015 4:56am

Hi Michael,

there are a few mistakes in your html code to start with. This is your current code:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Mike Cohen | Music and Sound</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">


<header>
  <a href="index.html" id="logo">
  <h1>Mike Cohen</h1>
  <h2>Music and Sound</h2>
  </a>
  <nav>
    <ul>
    <li><a href="index.html" class="selected">Reel</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="img/number-01.jpg">
      <img src="img/numbers-01.jpg" alt=">
      <p>Experimentation with color and texture.</p>
      </a>
    </li>
    <li>
    <a href="img/number-02.jpg">
      <img src="img/numbers-02.jpg" alt="">
      <p>Playing with blending modes in Photoshop.</p>
      </a>
    </li>
   <li>
    <a href="img/number-06.jpg">
      <img src="img/numbers-06.jpg" alt=">
      <p>80s style of glows</p>
      </a>
    </li>
     <li>
    <a href="img/number-09.jpg">
      <img src="img/numbers-09.jpg" alt=">
      <p>Drips</p>
      </a>
    </li>
    <li>
    <a href="img/number-12.jpg">
      <img src="img/numbers-12.jpg" alt=">
        <p>Creating Shapes Using Repetition</p>
       </a>
    </li>
      </ul>
    </section>
    <footer>
  <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt=="Twitter Logo"></a>
          <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt=="Facebook Logo"></a>
      <p>&copy; 2015 Mike Cohen.</p>
    </footer>

</body>

First of all you should know, that there needs to be a basic structure in your html file for it to be loaded correctly by a browser. The basic structure looks like this:

<html>
<head></head>
<body></body>
</html>

Now let's look into your code and find that structure. Let's start with the top part of your code:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Mike Cohen | Music and Sound</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">


<header>

Oops! This part is already missing the starting html tag, the head tags and it is missing the body starting tag :) . Please correct it as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mike Cohen | Music and Sound</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>

<body>
<header>

header and head are not the same thing :) The head part contains code pieces that won't be visible to the user, but to the browser respectively. Everything that sits after the opening body tag will be visible to the user :)

Next up is the bit after the closing header tag (your current code):

  </header>
<div id="wrapper>
    <section>
<ul>

The id wrapper of your div tag is missing the " at the end. Correct it as follows:

  </header>
<div id="wrapper">
    <section>
<ul>

Next big chunk, is your gallery section, which definitely needs some attendance (your current code):

<section>
<ul>
  <li>
    <a href="img/number-01.jpg">
      <img src="img/numbers-01.jpg" alt="> <!--there is a second " missing in the alt attribut to close it-->
      <p>Experimentation with color and texture.</p>
      </a>
    </li>
    <li>
    <a href="img/number-02.jpg">
      <img src="img/numbers-02.jpg" alt="">
      <p>Playing with blending modes in Photoshop.</p>
      </a>
    </li>
   <li>
    <a href="img/number-06.jpg">
      <img src="img/numbers-06.jpg" alt=">  <!--there is a second " missing in the alt attribut to close it-->
      <p>80s style of glows</p>
      </a>
    </li>
     <li>
    <a href="img/number-09.jpg">
      <img src="img/numbers-09.jpg" alt=">  <!--there is a second " missing in the alt attribut to close it-->
      <p>Drips</p>
      </a>
    </li>
    <li>
    <a href="img/number-12.jpg">
      <img src="img/numbers-12.jpg" alt=">  <!--there is a second " missing in the alt attribut to close it-->
        <p>Creating Shapes Using Repetition</p>
       </a>
    </li>
      </ul>
    </section>

Add the missing second "-signs in the alt attributes of the img elements I marked with comments. This part of your code should look like this afterwards:

  <section>
    <ul>
      <li>
        <a href="img/number-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Experimentation with color and texture.</p>
        </a>
      </li>
      <li>
        <a href="img/number-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
          <p>Playing with blending modes in Photoshop.</p>
        </a>
     </li>
     <li>
        <a href="img/number-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>80s style of glows</p>
        </a>
     </li>
     <li>
        <a href="img/number-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Drips</p>
        </a>
     </li>
     <li>
       <a href="img/number-12.jpg">
         <img src="img/numbers-12.jpg" alt="">
         <p>Creating Shapes Using Repetition</p>
       </a>
     </li>
    </ul>
  </section>

Ok up to the next bits in your footer code ;), which looks like this at the moment:

 <footer>
  <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt=="Twitter Logo"></a>
          <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt=="Facebook Logo"></a>
      <p>&copy; 2015 Mike Cohen.</p>
    </footer>
</body>

Apart form the fact that you are using Nick's twitter handle instead of your own ;), there are double equal signs == after your alt attributes of the image tags. There should only be one equal sign =. And then... think again about the basic structure of an html site.... after the closing body something seems to be missing! The closing html tag! Correct the code as follows:

    <footer>
      <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
      <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      <p>&copy; 2015 Mike Cohen.</p>
    </footer>
  </div> <!-- close the div id wrapper -->
 </body>
</html>

Phew! Ok that was the html structure. Now let's have a look at your CSS code, which looks like this as you posted up there:

a { text-decoration: none; }

wrapper {

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

logo {

text-align: center; margin: 0; } a { color; #6ab47b; }

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

h1, h2 { color:#fff; }

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

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

First up, you are trying to style the div with the id named wrapper. However your css will never style that div, because you did not tell the browser to target that div's id. To fix this you need to add a hash sign to the word wrapper. Like so:

#wrapper {

same for the logo. You are trying to target an anchor (link in this case) item with the id named logo. Fix it in your css like this:

a#logo {

Ok that's about it.. No, wait! One more thing: You told the browser that your header part needs the background color #6ab47b You told the browser that your h1 and h2 (headings) should be colored white/#fff.

At first glance in your html, this is just fine. However what happens, if you decide to use another h1 and h2 title outside of the header. Somewhere within the rest of the body? Since you told the browser to use color white / #fff for your body background in general, you won't be able to actually see those headings, because they will also be white.

If you want to be able to use h1 and h2 and be able to see them when used outside header, you should be more specific with their declaration. This way they will only be colored white, when they are inside of the header, not outside. You can achieve it by adding the following to your h1 and h2 rules:

header h1, 
header h2 { 
   color: #fff;
}

Ok now we should have corrected your code ;)

Cheers Saskia

Answer 2 · 2015-06-14T01:04:49Z

June 14, 2015 1:04am

Your body background is white and most of the text colors are set to white which is why you can't see the color. Trying changing the text color to black #000;. Also, you're not selecting the wrapper with an id and the padding should have a dot between the 0.5

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

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

 a { color; #6ab47b; }

header {
   background: #6ab47b; border-color: #599a68;
}
h1, h2 { color:#000; }

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

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

Answer 3 · 2015-06-14T01:09:19Z

June 14, 2015 1:09am

I see a few unclosed double-quotes, which can throw things off all over a document:

Answer 4 · 2015-06-20T01:39:20Z

June 20, 2015 1:39am

STILL STUCK HERE. NOTHING LOOKS RIGHT WHEN TESTED!!!!!

Answer 5 · 2015-06-20T18:14:48Z

June 20, 2015 6:14pm

Ok something fucked is happening. Doublequotes that I took out yesterday (and I have saved my changes) have somehow just reappeared

Answer 6 · 2015-06-20T18:20:07Z

June 20, 2015 6:20pm

Re: the div thing. The last 4 lines of my code:

</footer> </div> </body> </html>

I'm assuming the last closing div tag is to close up the <div id="wrapper">, but in your code it isn't there. Yet when I eliminate that closing tag the workspace indicates a mistake.

Answer 7 · 2015-06-20T18:24:28Z

June 20, 2015 6:24pm

Anyhow, here it is now. I can't seem to find what mistakes I've missed:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Mike Cohen | Music and Sound</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>

<body> <header> <a href="index.html" id="logo"> <h1>Mike Cohen</h1> <h2>Music and Sound</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Reel</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="img/number-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/number-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/number-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>80s style of glows</p> </a> </li> <li> <a href="img/number-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips</p> </a> </li> <li> <a href="img/number-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating Shapes Using Repetition</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Mike Cohen.</p> </footer> </div> </body> </html>

Answer 8 · 2015-06-20T18:26:33Z

June 20, 2015 6:26pm

Hold on, for some odd reason not everything I'm highlighting is actually copying and pasting in here. WTF.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Mike Cohen | Music and Sound</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>

<body> <header> <a href="index.html" id="logo"> <h1>Mike Cohen</h1> <h2>Music and Sound</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Reel</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="img/number-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/number-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/number-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>80s style of glows</p> </a> </li> <li> <a href="img/number-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips</p> </a> </li> <li> <a href="img/number-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating Shapes Using Repetition</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Mike Cohen.</p> </footer> </div> </body> </html>

Answer 9 · 2015-06-20T18:27:11Z

June 20, 2015 6:27pm

Ok, same crap happening. I'll contact support.

Answer 10 · 2015-06-20T18:32:09Z

June 20, 2015 6:32pm

The closing div tag wasn't missing. It just didn't copy over. I think this should be a link to my snaphot?

https://w.trhou.se/479y8b7clr

Answer 11 · 2015-06-20T18:47:04Z

June 20, 2015 6:47pm

Ok, I fixed what was wrong. You must pay closer attention to file and folder naming, Michael.

For example: You named your css and img folder with capitalized letters, but in your html file you kept referring to the file paths with lower case names. Or another example: you link to an image but spelt the filename wrong, like leaving an s out at the end. Or another example: adding spaces between attributes and equal signs Or another example: spaces between selectors/class names and pseudo-classes (f.e. a:hover)

HTML and coding in general needs to be precise. Pay close attention to consistent spelling of file names, paths, folder names, function names, id and class names, equal signs, quote marks, closing and opening html tags etc.

See the snapshot of the workspace that contains the corrected code. Continue watching the course to learn how to style the page further.

https://w.trhou.se/tf6om2o975

Welcome to the Treehouse Community

Looking to learn something new?

Michael Cohen

Michael Cohen

Stuck in HTML/CSS. Not sure what is wrong and why it doesn't look right. Colors not showing up, things not working, etc

Michael Cohen

Michael Cohen

Michael Cohen

Michael Cohen

wrapper {

logo {

Jay Tamayo

Jay Tamayo

Saskia Lund

Saskia Lund

11 Answers

Saskia Lund

Saskia Lund

Michael Cohen

Michael Cohen

Saskia Lund

Saskia Lund

Abe Layee

Abe Layee

Michael Cohen

Michael Cohen

Michael Harper

Michael Harper

Michael Cohen

Michael Cohen

Michael Cohen

Michael Cohen

Michael Cohen

Michael Cohen

Saskia Lund

Saskia Lund

Michael Cohen

Michael Cohen

Saskia Lund

Saskia Lund

Michael Cohen

Michael Cohen

Michael Cohen

Michael Cohen

Michael Cohen

Michael Cohen

Saskia Lund

Saskia Lund

Michael Cohen

Michael Cohen

Saskia Lund

Saskia Lund