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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by Sigurjon Johannesson
Sigurjon Johannesson
5,453 Points

I can't get the pictures in two coloms. what am I doing wrong?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sigurjón Jóhannesson | Áhugamaður</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700,700italic,500|Lora:400,700italic,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main1.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Sigurjón Jóhannesson</h1>
        <h2>Áhugamaður</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class:"selected">Portfolio</a></li>
          <li><a href="Um-mig.html">Um mig</a></li>
          <li><a href="Hafa-samband.html">Hafa Samband</a></li>
        </ul>  
      </nav>  
    </header>
    <div id="wrapper">
      <section>
        <ul id:"gallery">
          <li>
            <a href="Pic/island1.jpg">
              <img src="Pic/island1.jpg" alt="">
              <p>Sólsetur á sunnanverðu Íslandi</p>
            </a>
          </li>
          <li>
            <a href="Pic/island2.jpg">
              <img src="Pic/island2.jpg" alt="">
              <p>Ísland að skipta í vetrafeldinn</p>
            </a>
          </li>
          <li>
            <a href="Pic/island3.jpg">
              <img src="Pic/island3.jpg" alt="">
              <p>Fjallagarðu á Íslandi</p>
            </a>
          </li>
          <li>
            <a href="Pic/island4.jpg">
              <img src="Pic/island4.jpg" alt="">
              <p>Bláa lónið</p>
            </a>
          </li>
          <li>
            <a href="Pic/island5.jpg">
              <img src="Pic/island5.jpg" alt="">
              <p>Laugarvegurinn frægi</p>
            </a>
          </li> 
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/Sigurjon90"><img src="Pic/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/sigurjonj"><img src="Pic/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2015 Sigurjón Jóhannesson</p>
      </footer>
    </div>
  </body>
</html>

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

body {
  font-family: ’Lora’, sans-serif;
}

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

a {
text-decoration: none;
}

img {
  max-width: 100%;
}



/**************************************
Heading
***************************************/

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

h1 {
  font-family: 'Ubuntu', cursive;
  margin: 15px 0;
  font-size: 1.90em;
  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;
}



/**************************************
litir
***************************************/
/*site body*/

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

header {
  background: #217C7E;
  border-color: #9A3334; 
}

a {
  color: #217C7E;
}
/* Headline litur */
h1, h2 {
  color: #fff;
}
/* nav í farsímavafrara */
nav {
  background: #217C7E;
}
/* selected virkar ekki hjá mér - laga þetta seinna */
nav a, nav a.selected{
  color: #fff;
}
/* nav link */
nav a.selected, nav a:hover {
  color: darkblue;
}

1 Answer

jamescool
jamescool
44,592 Points

For starters, you've declared the unordered list id incorrectly (you must use an equals sign rather than a colon). You've also done this with the class of "selected". Also in the CSS file it looks like you've inadvertently commented out some important CSS rules. (I'm thinking this was a mistake because it appears that you've forgotten to include the asterisk at the end of the comment on two occasions near the bottom of the document).

It's quite difficult to evaluate what's causing your problem because we don't know the dimensions of the images you're using.

Sigurjon Johannesson
Sigurjon Johannesson
5,453 Points

Thank you James ! I have gone over this, again and again and found nothing. The problem was that I didn't used equal sign =)