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 Image Captions

i've copied and pasted the correct css and the images still wont align side by side? WHAT DO I DO!?

i've copied and pasted the correct css and the images still wont align side by side? WHAT DO I DO!?

Can you show your html and css code?

7 Answers

Mohamed A.Fouad
Mohamed A.Fouad
5,550 Points

I've just finished reviewing your code and I've found these mistakes : 1- comments go like this

/* Comment */ 

not like this

/Comment/

2- The hash sign (#) before the ids in CSS file is missing.

3- Some HTML attributes need to be closed for example:

class="social-icon

Needs to be like this

class="social-icon"

4- Also You have missed out several semicolons.

5- The main problem was that you forgot to put (:) in here

width: 45%; 

it was like this

width 45%

so the full CSS code would be like this

/******************************************************* 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: 'Oswald', 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; }

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

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; 
    margin: 
    text-align: center; 
}

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

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

/*over nav link*/
nav a.selected, nav a:hover { color: #43563f}

/*site body*/ 
body { background-color: #f5f5f5; color: #f5f5f5; }

header { background: #eba133; border-color: #500a68 }

nav { background: #888888; }

/*logo text*/ 
h1, h2 { color: #f5f5f5; }

/*link color*/
 a { color: #EBA133; }

/*nav link*/

nav a, nav a:visited { 
    color: #eba133; 
    font-family: 'Roboto', sans-serif; 
    font-weight: normal; 
    line-height: 0.8em;
}

and the HTML code would be like this

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Luke Eubank - Designer</title>
   <link rel="stylesheet" href="css/normalize.css">
   <link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Sarpanch:400,800,600' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
        <a href="index.html" id="logo">
          <h1>Luke</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=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
         <li>
          <a href="img/numbers-02.jpg"> 
           <img src="img/numbers-02.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
          <li>
          <a href="img/numbers-06.jpg"> 
           <img src="img/numbers-06.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
          <li>
          <a href="img/numbers-09.jpg"> 
           <img src="img/numbers-09.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
            <li>
          <a href="img/numbers-12.jpg"> 
           <img src="img/numbers-12.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
         </ul>
      </section>
       <footer>
         <a href="http://twitter.com/lukeethere"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
         <a href="http://facebook.com/luke.ashton.eubank"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>        

         <p>&copy; 2014 Luke Eubank</p>
      </footer>
    </div>
      </body>
      </html>

compare those codes with your codes and you will find what is missing.

James Barnett
James Barnett
39,199 Points

Now that is what I call a throughly helpful reply. :guitar:

Mohamed A.Fouad
Mohamed A.Fouad
5,550 Points

Thank you sir, your comment honours me.

Mohamed A.Fouad
Mohamed A.Fouad
5,550 Points

As Gloria said, could you please give us your codes to review it so we can help you!

/*******************************************************
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: 'Oswald', 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;
  }

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

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;
  margin:
  text-align: center;
    }

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

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

/*over nav link*/
nav a.selected, nav a:hover {
  color: #43563f}

/*site body*/
body {
  background-color: #f5f5f5;
  color: #f5f5f5;
  }

header {
  background: #eba133;
  border-color: #500a68
  }

nav {
  background: #888888;
  }

/*logo text*/
h1, h2 {
  color: #f5f5f5; }

/*link color*/
a {
  color: #EBA133;
  }

/*nav link*/

nav a, nav a:visited {
  color: #eba133;
  font-family: 'Roboto', sans-serif
  font-weight: normal;
  line-height: 0.8em

You have missed out several semicolons. Try adding them. One of them is in the image tag...for example change

img { max-width: 100% }

to

img { max-width: 100%; }

Ps. Your code is not appearing very well because it has no markdown. Try looking at the post I suggested in the other question of yours so that we can see your code better, because without it more errors appear.

Mohamed A.Fouad
Mohamed A.Fouad
5,550 Points

1- I don't see HTML code! Please send us the right code.

2- As Gloria said, You have missed out several semicolons.

3- In the CSS code some classes need to be identified by using "." before using them in CSS for example:

  • Your code is like this:
logo{text-align: center; margin: 0; }
  • The right code should be like this:
/* if this is a class use dot "." before the name of it */
.logo{text-align: center; margin: 0; }
/* if this is an id use hash "#" before the name of it */
#logo{text-align: center; margin: 0; }
  <head>
    <meta charset="utf-8">
    <title>Luke Eubank - Designer</title>
   <link rel="stylesheet" href="css/normalize.css">
   <link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Sarpanch:400,800,600' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
        <a href="index.html" id="logo">
          <h1>Luke</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=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
         <li>
          <a href="img/numbers-02.jpg"> 
           <img src="img/numbers-02.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
          <li>
          <a href="img/numbers-06.jpg"> 
           <img src="img/numbers-06.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
          <li>
          <a href="img/numbers-09.jpg"> 
           <img src="img/numbers-09.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
            <li>
          <a href="img/numbers-12.jpg"> 
           <img src="img/numbers-12.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
         </ul>
      </section>
       <footer>
         <a href="http://twitter.com/lukeethere"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon></a>
         <a href="http://facebook.com/luke.ashton.eubank"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon></a>        

         <p>&copy; 2014 Luke Eubank</p>
      </footer>
    </div>
      </body>
    </html> ```

more than helpful man! really appreciate it