Help... Cannot see my header(my name) or color any more? I am in the class "How to build a website course".

Question

Background in header area is white and no longer see my name? Background color in header was green now white. Just completed the media query section of the course.

Answer 1 · 2018-10-10T20:56:07Z

October 10, 2018 8:56pm

Ron,

If you checkout your CSS file you'll notice there's currently an extra { in there...

.contact-info li.mail a{
  background-image: url('../img/mail.png');
}

}

Answer 2 · 2018-10-10T20:25:30Z

October 10, 2018 8:25pm

Hi Ron!

Would you mind posting the HTML and CSS of the code you're working on? That would help the community narrow down what might be happening for you.

Answer 3 · 2018-10-10T20:50:05Z

October 10, 2018 8:50pm

<!DOCTYPE html>
    <html>      
      <head>
        <meta charset="utf-8">
        <title>Ron Burns | Designer</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">

      </head>
      <body>
         <header>
           <a href="index.html" id ="logo">
             <h1>Ron Burns</h1>
             <h2>Designer</h2>
           </a>
           <nav>
             <ul>
               <li><a href="index.html" class="selected">Potfolio</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 id="gallery"> 
                <li>
                  <a href="img/numbers-01.jpg">
                 <img src="img/numbers-01.jpg" alt="">
                  <p>Experimention with color and Texture.</p>
                    </a>
                </li> 
                <li>
                  <a href="img/numbers-02.jpg">
                 <img src="img/numbers-02.jpg" alt="">
                  <p>Playing with blended nodes.</p>
                    </a>
                </li>
               <li>
                  <a href="img/numbers-06.jpg">
                 <img src="img/numbers-06.jpg" alt="">
                  <p>Example 06.</p>
                    </a>
                </li>   
               <li>
                  <a href="img/numbers-09.jpg">
                 <img src="img/numbers-09.jpg" alt="">
                  <p>Example 09.</p>
                    </a>
                </li>   
               <li>
                  <a href="img/numbers-12.jpg">
                 <img src="img/numbers-12.jpg" alt="">
                  <p>Example 12.</p>
                    </a>
                </li>   
             </ul>
        </section>
<footer>
<a href="http://twitter.com/rvburns"><img src="img/twitter-wrap.png" alt="twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/ronald.burns.792"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
               <p>&copy; 2018 Ron Burns</p>

 </footer>
          </div>

      </body>      
</html>

Answer 4 · 2018-10-10T20:51:12Z

October 10, 2018 8:51pm

my Main CSS

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

a{
  text-decoration:none;
}

img {
  max-width:100%;
}

h3{
margin: 0 0 1em 0;
}

body{
font-family: 'Open-Sans', san-serif;

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

}

/***************************************************
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.75ems;
  font-weight: normal;
  line-height: 0.8ems;   
}

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

.socical-icon {
  width: 10x;
  height: 10px;
  margin: 0 5px;    
}

/***************************************************
Page Portfolio - setup positioning for photos
***************************************************/

#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 Me 
***************************************************/

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

  /***************************************************
Page Contact Me 
***************************************************/

  .contact-info {
    list-style: none;
    padding:0;
    margin: 0;
    font-size: 0.9em;  
  }

/***************************************************
Page Contact Me - styling for phone and mail icons
***************************************************/
.contact-info a {
  display: block;
  min-height:20px;
  background-repeat:no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a{
  background-image: url('../img/mail.png');
}

}
header{
  background: #6ab47b;
  border-color: #599a68;
}
h1,h2 {
color: #fff;
}
/***************************************************
navigation color - 
***************************************************/
nav{
background:#599a68;
}


nav a, nav a:visited{
color: #fff;
}
nav a.selected, nav a:hover{
color:#32673f;
}
/* keep background color white and change body colors to grey*/
body {
background-color:#fff;
  color: #999;
}

Answer 5 · 2018-10-10T21:15:13Z

October 10, 2018 9:15pm

Tim,

Thank you!

I removed the extra curly brace and that solved the problem!!!!! I learned something new today...thanks again!!!!

Answer 6 · 2018-10-10T22:08:39Z

October 10, 2018 10:08pm

Thank you Tim, Do you know if the workspaces can detect syntax errors going forward?

Answer 7 · 2018-10-10T22:26:14Z

October 10, 2018 10:26pm

Hey Ron, unfortunately it doesn't really offer great syntax error detection from what I've seen. Sometimes it can be helpful to throw your code into a free Codepen and that'll pick up those errors.

Answer 8 · 2018-10-10T23:30:49Z

October 10, 2018 11:30pm

Thank you again! I guess you will just have to remember all these settings and use this as a template for the future I suppose?

Welcome to the Treehouse Community

Looking to learn something new?

Ron Burns

Ron Burns

Help... Cannot see my header(my name) or color any more? I am in the class "How to build a website course".

8 Answers

Tim Knight

Tim Knight

Tim Knight

Tim Knight

Ron Burns

Ron Burns

Tim Knight

Tim Knight

Ron Burns

Ron Burns

Ron Burns

Ron Burns

my Main CSS

Ron Burns

Ron Burns

Tim Knight

Tim Knight

Ron Burns

Ron Burns

Tim Knight

Tim Knight

Ron Burns

Ron Burns