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

Posted by Alina Sirbeanu
Alina Sirbeanu
992 Points

One Column displaying

Hello again!

I read all the answers about this problem and i dint find were is my error in the code.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sirbeanu Alina | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">

</head> <body> <header>

  <a href="index.html" id= "logo">
    <h1>Sirbeanu Alina </h1>
    <h2>Designer</h2>
  </a>
  <nav>
    <ul id="gallery">
      <li><a href="index.html" class="selected">Portofolio</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>
       <li>
         <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Experimentations with color and texture.</p>
         </a>
       </li>

       <li>
         <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Playing in blending modes in Photoshop.</p>
         </a>
       </li>
       <li>
         <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>Trying to create an 80's style glows.</p>
         </a>
       </li>
       <li>
         <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Driping created using photoshop brushes.</p>
         </a>
       </li>
     </ul>
    </section>
    <footer>
      <a href="http://facebook.com/sirbeanu.alinamaria"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      <p>&copy; 2015 Sirbeanu Alina.</p>
    </footer>
</div>

</body> </html>

and for the CSS is:

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

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

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

p { color: #6ab47b; }

I need some help.Thank you

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Just fixed the CSS code so it displays right, (your id="logo" has a space between)

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: 'Changa One', sans-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: #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;
 }

p {
 color: #6ab47b; 
}
Alina Sirbeanu
Alina Sirbeanu
992 Points

Hey erdrag,

Thank you for your replay! I fix the error

2 Answers

Carmine Maraglio
Carmine Maraglio
29,762 Points
Carmine Maraglio
Carmine Maraglio
29,762 Points

Not 100% what the question is, but, "gallery li" isn't going to call anything. If you change that to "gallery ul li" that seems to align your gallery.

Alina Sirbeanu
Alina Sirbeanu
992 Points

Hey Carmine,

Thank you for your replay! I did this but remain the same.

Carmine Maraglio
Carmine Maraglio
29,762 Points
Carmine Maraglio
Carmine Maraglio
29,762 Points

Can you give me some more detail on what you are trying to do? Or what the site should look like?

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Take a screenshot of the website and post it here, so we can see how it looks.

Alina Sirbeanu
Alina Sirbeanu
992 Points

I dont have in my mid a site to make.Im still learning from the tutorials. The only thing that i dont und is that i follow the code step by step and everything seems to be ok ..but it doest floated my galery in 2 column like it should do.

Carmine Maraglio
Carmine Maraglio
29,762 Points
Carmine Maraglio
Carmine Maraglio
29,762 Points

Found the issue:

You had the id of gallery associated with the "nav". Move that to the "section" tag above your gallery. Also, I changed the ID to a class.

Then you can update your css to show:

.gallery {

margin: 0; padding: 0; list-style:none; }

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

.gallery ul li:nth-child(2n){ float: right; }

Alina Sirbeanu
Alina Sirbeanu
992 Points
Alina Sirbeanu
Alina Sirbeanu
992 Points

Is not so handy to display the screenshot here :(