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 Dania Lugo
Dania Lugo
602 Points

My two columns aren't appearing. I'm sure it's something really silly, but I've watched the video multiple...

I've watched the video like 3 times now and have copied everything he did, but I'm not getting two columns (and I'm definitely saving my changes first). Here's what I have in my index.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dania Lugo | Cat Lover</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Mukta+Vaani:300,400,600,700|Slabo+27px" rel="stylesheet"> <link rel="stylesheet" href="css/main.css">

</head> <body> <header> <a href="index.html" id="logo"> <h1>Dania Lugo</h1> <h2>Professional Cat Lover</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="">
      <p>Playing with Blending modes</p>
        </a>
    </li>
    <li>
      <a href="IMG/numbers-02.jpg"></a>
      <img src="IMG/numbers-02.jpg" alt="">
      <p>Trying to create an 80s style</p>
    </li>
    <li>
      <a href="IMG/numbers-12.jpg"></a>
      <img src="IMG/numbers-12.jpg" alt="">
      <p>Creating shapes using repetition</p>
    </li>
  </ul>
</section>
<footer>
  <a href="http://twitter.com/misslasagna"><img src="IMG/twitter-wrap.png" alt="Twitter Logo"></a>
  <a href="http://facebook.com/misslasagna"><img src="IMG/facebook-wrap.png" alt="Facebook Logo"></a>

  <p>&copy; 2017 Dania Lugo.</p>
</footer>
 </div>

</body> </html>

And my css doc:

/************* General - site wide *************/

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

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Slabo 27px', serif; 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; }

/************* Colors *************/

/* site body */

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

/* green header */

header { background: #BA55D3; border-color: #000000 }

/* nav background on mobile */

nav { background: #BA55D5; }

/* logo text */

h1, h2 { color: #fff; }

/* color nav link */

a { color: #BA55D3; }

/* selected nav link */

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

/* selected nav link*/

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

Help & thank you! :D

Tyler Combs
Tyler Combs
15,525 Points
Tyler Combs
Tyler Combs
15,525 Points

Could you take a snapshot of your workspace and post it here? It should be a camera icon in the upper-right section of workspaces. It would make it easier to help, especially since the formatting on the code you pasted isn't working right, and it didn't work when I tried to format it myself in a comment.

Dania Lugo
Dania Lugo
602 Points

Tyler, I took a snapshot, but I'm not sure how to add it here. Do I need to take one of the css doc AND the html doc, or does one snapshot get both? I'm also not sure how to reply directly to your commend, so hopefully you see this message!

Tyler Combs
Tyler Combs
15,525 Points
Tyler Combs
Tyler Combs
15,525 Points

The snapshot I believe gives you a link. It will give the entire workspace, so you don't have to do it for each file.

2 Answers

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points

Hi Diana,

Off the bat the first thing I spotted was in your html is "<ul id:="gallery">". You shouldn't have a colon punctuation in your id declaration. Try this:

<section>
  <ul id="gallery">
   <!-- rest of your code here -->
Dania Lugo
Dania Lugo
602 Points

That was it, thank you!

giannis kratimenos
giannis kratimenos
4,763 Points
giannis kratimenos
giannis kratimenos
4,763 Points

hi dania, i also see the mistake that already charl refered..try his solution!!