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 Styling Web Pages and Navigation Build Navigation with Unordered Lists

Pablo Paramo
Pablo Paramo
1,210 Points
Posted by Pablo Paramo
Pablo Paramo
1,210 Points

"Clear: both". I can't make it work. Footer still appears next to the last image.

This is my css code:

/********************************/ FOOTER /********************************/

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

.social-icon { width: 20px; height: 20px; }

Pablo Paramo
Pablo Paramo
1,210 Points
Pablo Paramo
Pablo Paramo
1,210 Points

This is the html file:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Pablo Paramo | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Pablo Nicolas Paramo</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</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="" height="400" width="600"> <p>Beatiful wheets.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt="" height="400" width="600"> <p>Happy family.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt="" height="400" width="600"> <p>Orange color.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt="" height="400" width="600"> <p>World mission.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt="" height="400" width="600"> <p>African Children.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a>
<p>© 2014 Pablo Paramo.</p> </footer> </div> </body> </html>

And this, the CSS.

/***********************************/
 GENERAL
/***********************************/

body {
  font-family: 'Open Sans', 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: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
  padding: 0 0 10px;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
  padding: 0 0 20px 0;

}



/***********************************/
NAVEGATION
/***********************************/

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

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
  text-align: center;
}

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

.social-icon {
  width: 20px;
  height: 20px;
}


/***********************************/
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-color: #6ab47b;
  border-color: #599a68:

/* Nav background on mobile */
nav {
  background: #599a68;
}    

/* Logo text*/ 
}
h1, h2 {
  color: #fff;
}
/* links */

a {
  color: #6ab47b;
}

/* Nav link */

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

/* Selected Nav link */
nav a.selected, nav a:hover {
  color:#32673f;
}
Rich Bagley
Rich Bagley
25,869 Points

Hi Pablo,

Can you edit your post above to include 3 back ticks on the line above and 3 on the line below the code please? If you add the language after the top set, e.g. ```html it will format the code for other students to see it easier / answer it quicker, for example:

/* General */
h1 {
    font-size: 2rem;
}

Here's a great post that should hopefully help explain further.

Thanks

-Rich

1 Answer

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

I found several errors in your code and after correcting them it works:

Here's the CSS CODE:

/***********************************
 GENERAL
***********************************/

body {
  font-family: 'Open Sans', 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: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
  padding: 0 0 10px;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
  padding: 0 0 20px 0;

}



/***********************************
NAVEGATION
***********************************/

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

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
  text-align: center;
}

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

.social-icon {
  width: 20px;
  height: 20px;
}

/***********************************
PAGE: PORTFOLIO
***********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  list-style: none;
  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-color: #6ab47b;
  border-color: #599a68:
}

/* Nav background on mobile */
nav {
  background: #599a68;
}    

/* Logo text*/ 

h1, h2 {
  color: #fff;
}
/* links */

a {
  color: #6ab47b;
}

/* Nav link */

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

/* Selected Nav link */
nav a.selected, nav a:hover {
  color:#32673f;
}

And the HTML CODE:

<title>Pablo Paramo | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">


<header>
  <a href="index.html" id="logo">
    <h1>Pablo Nicolas Paramo</h1> 
    <h2>Designer</h2>
  </a>
 <nav>
    <ul>
    <li><a href="index.html" class="selected">Portfolio</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="" height="400" width="600"/>
          <p>Beatiful wheets.</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="" height="400" width="600"/>
          <p>Happy family.</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="" height="400" width="600"/>
          <p>Orange color.</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="" height="400" width="600"/>
          <p>World mission.</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="" height="400" width="600"/>
          <p>African Children.</p>
        </a>
      </li> 
 </ul>
    </section>
    <footer>
        <a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"/></a>     
      <p>&copy; 2014 Pablo Paramo.</p>
    </footer>
  </div>

The CSS Error :

Your Code: 

    /***********************************/
     COLORS
     /***********************************/

<- You close the comment here so the word COLORS is translated as a selector in HTML It's looking for the HTML tage <COLORS> that doesn't exist.

Be careful with multiline comments. This is a multiline comment correctly written:

    /***********************************
     COLORS
    ***********************************/

HTML Error:

Your code:

<img src="img/numbers-01.jpg" alt="" height="400" width="600">

Should be: 

<img src="img/numbers-01.jpg" alt="" height="400" width="600"/>

This is because the <img> tag in HTML is a self closing one. Without the slash the tag isn't closed therefore the html structure is faulty and properties cannot be correctly applied.

Here is a jsFiddle Link to see this yourself.

And another word of advice:

Download NetBeans, this is a easy way to get past these kind of small problems. It will show you hints when something isn't codded correctly.

Hope this helps.

Regards,

N.V.

Pablo Paramo
Pablo Paramo
1,210 Points
Pablo Paramo
Pablo Paramo
1,210 Points

Thanks SO MUCH Nejc! I really Appreciate the fact that you took the time to write that valuable answer. All the best.

Pablo.

Bob Beaumont
Bob Beaumont
1,317 Points

Nejc! ~ just wanted to say thanks as well. Impressed with you taking the time to answer his question and you good eye for catching these details. You taking the time to do that helps us all. Thanks again. Bob.