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 Style the Portfolio

Mārtiņš Ikers
Mārtiņš Ikers
365 Points
Posted by Mārtiņš Ikers
Mārtiņš Ikers
365 Points

I followed to the instructions, writed the same like in video but didnt make two collums. My english is bad.

something not right

Don Howard
Don Howard
5,827 Points

If you would paste the code in your post we will be able to help you better.

Mārtiņš Ikers
Mārtiņš Ikers
365 Points
Mārtiņš Ikers
Mārtiņš Ikers
365 Points 
            <p>

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


body {
  font-family: 'Fugaz One' , Covered By Your Grace;
}


a {
  text-decoration: none;
}

img {
  max-width:100%;
}

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

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

h1 {
 font-family: 'Annie Use Your Telescope';
  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;
}



/***************************
NAVIGATION
**************************/

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

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

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

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

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


#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}


a {
  color: #6ab47b;
}

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

h1, h2 {
  color: #fff;
}

nav {
  background: #599a68;
}

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

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

</p>
            ```

5 Answers

Don Howard
Don Howard
5,827 Points

In your html for gallery there is one error that needs to be corrected. If you look you will see that a colon is being used after id rather than an equals sign:

Your code: <html> <ul id:"gallery">

Corrected code: <html> <ul id="gallery">

Hope that helps, Don

Don Howard
Don Howard
5,827 Points
Don Howard
Don Howard
5,827 Points

Hi Mārtiņš ,

I assume you are wanting the gallery list to be two columns. Your css code looks correct for creating 2 columns and using 100% of the space. Without seeing the html code it is difficult to say how the css is applied to your page. If you would paste the html code here also it would be helpful.

Also, if you use 3 backticks with your code it will display better. Here are the instructions from the cheatsheet: Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

        ```html
        <p>This is code!</p>
        ```

Hope that helps, Don

Mārtiņš Ikers
Mārtiņš Ikers
365 Points
Mārtiņš Ikers
Mārtiņš Ikers
365 Points 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>
 Martins Ikers | victim
  </title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Fugaz+One|Covered+By+Your+Grace|Annie+Use+Your+Telescope' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
  <header>
    <a href="īndex.html" id="logo">
    <h1>Martins Ikers</h1>
    <h2>Victim</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"></a>
      <img src="img/numbers-01.jpg" alt="">
      <p>Colors and textures</p>
      </li>
      <li>
      <a href="img/numbers-02.jpg"></a>
      <img src="img/numbers-02.jpg" alt="">
      <p>photo</p>
      </li>
      <li>
      <a href="img/numbers-06.jpg"></a>
      <img src="img/numbers-06.jpg" alt="">
      <p>nice colors</p>
      </li>
      <li>
      <a href="img/numbers-09.jpg"></a>
      <img src="img/numbers-09.jpg" alt="">
      <p>random</p>
      </li>
      <li>
      <a href="img/numbers-12.jpg"></a>
      <img src="img/numbers-12.jpg" alt="">
      <p>Atractive</p>
      </li>
    </ul>
    </section>
  <footer>
   <a href="http://twiter.com/miksikers"> <img src="img/twitter-wrap.png" alt="Twitter logo"></a>
    <a href="http://facebook.com/courer420"><img src="img/facebook-wrap.png" alt="facebook logo"></a>
    <p>&copy; 2014 Mārtiņš Ikers</p>
    </footer>
    </div>
  </body>
</html>
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Mārtiņš,

Also in your css you have nav a.selected, nav a:hover that needs to be nav a:selected, nav a:hover

You also have all your css wrapped in a <p> but that may of just been an error while pasting your code into this post.