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

My workspace creation (i am doing along the way of learning) has two issues

My workspace creation (i am doing along the way of learning) has an issue that one photo in the gallery isn't placed in the line it should be. it's lower a bit.

why is that ?

12 Answers

show your code please?...

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

body { font-family: 'Open sans', sans-serif; }

wrapper {

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

a { text-decoration: none; }

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

img { max-width: 100%; }

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

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

footer { font-size: 0.75em; text-align: center; clear: both; 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; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; 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; }

/* link */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Leon Breuer | Upholster</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>Leon Breuer</h1> <h2>Upholster</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 color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" <alt=""> <p>EPlaying with blending modes in photo shop</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 of glows</p> </a> </li>   <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" <alt=""> <p>Drips created using Photoshop brushes</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" <alt=""> <p>Creating shapes using reputition</p> </a> </li> </ul> </section> <footer> <a href="http://www.twitter.com/dovbreuer"><img src="img/twitter-wrap.png" alt="Twitter logo"></a> <a href="https://www.facebook.com/profile.php?id=100005527744220"><img src="img/facebook-wrap.png" alt="Facebook logo"></a> <p>© 2014 Leon Breuer.</p> </footer> </div> </body> </html>

i see your CSS. Can you post your HTML?

Wrap your code with 3 backticks (```) on the line before and after.

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

do you have a link to the website?

<header>
  <a href="index.html" id="logo">
    <h1>Leon Breuer</h1>
    <h2>Upholster</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>

          <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg">
            <p>Experimentation with color and texture</p>
          </a>

          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg">
            <p>EPlaying with blending modes in photo shop</p>
          </a>

          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg">
            <p>Trying to create an 80's style of glows</p>
          </a>

          <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg">
            <p>Drips created using Photoshop brushes</p>
          </a>

          <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg">
            <p>Creating shapes using reputition</p>
          </a>

    </section>
    <footer>
      <a href="http://www.twitter.com/dovbreuer">
        <img src="img/twitter-wrap.png" alt="Twitter logo">
      </a>
      <a href="https://www.facebook.com/profile.php?id=100005527744220">
        <img src="img/facebook-wrap.png" alt="Facebook logo">
      </a>
      <p>
        &copy; 2014 Leon Breuer.
      </p>
    </footer>
</div>

I removed your unordered list and list tags. They seemed unnecessary for the visual representation task at hand here. Everything appears to be aligned over here now! Let me know...

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Leon Breuer | Upholster</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>Leon Breuer</h1> <h2>Upholster</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 color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" <alt=""> <p>EPlaying with blending modes in photo shop</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 of glows</p> </a> </li>   <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" <alt=""> <p>Drips created using Photoshop brushes</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" <alt=""> <p>Creating shapes using reputition</p> </a> </li> </ul> </section> <footer> <a href="http://www.twitter.com/dovbreuer"><img src="img/twitter-wrap.png" alt="Twitter logo"></a> <a href="https://www.facebook.com/profile.php?id=100005527744220"><img src="img/facebook-wrap.png" alt="Facebook logo"></a> <p>© 2014 Leon Breuer.</p> </footer> </div> </body> </html>

it's not coming through correctly...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Leon Breuer | Upholster</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>Leon Breuer</h1>
        <h2>Upholster</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 color and texture</p>
              </a>
            </li>
             <li>
              <a href="img/numbers-02.jpg">
                <img src="img/numbers-02.jpg" <alt="">
                <p>EPlaying with blending modes in photo shop</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 of glows</p>
              </a>
            </li>   
             <li>
              <a href="img/numbers-09.jpg">
                <img src="img/numbers-09.jpg" <alt="">
                <p>Drips created using Photoshop brushes</p>
              </a>
            </li>
             <li>
              <a href="img/numbers-12.jpg">
                <img src="img/numbers-12.jpg" <alt="">
                <p>Creating shapes using reputition</p>
              </a>
            </li>
          </ul>
        </section>
        <footer>
          <a href="http://www.twitter.com/dovbreuer"><img src="img/twitter-wrap.png" alt="Twitter logo"></a>
          <a href="https://www.facebook.com/profile.php?id=100005527744220"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
          <p>&copy; 2014 Leon Breuer.</p>
        </footer>
    </div>
  </body>
</html>

finally got it right thank you

Where you have put in the img for example <img src="img/numbers-01.jpg" <alt=""> you have an "<" before the alt tag which is causing your code to break.

Remove the "<" symbol before the alt tag on all your images and it should work.

p.s I just learned the exact same way coding in workspaces whilst watching the videos and it worked great. learn by doing is the way ;)

it still doesn't work... i removed it and the photo is still pushed down... please help

I really appreciate everyone's help. you made me aware about the ul and li that may be in error so i re wrote the entire ul in the section element and it works wonders now. i'm not exactly sure what was really wrong. but i'm grateful that got to study and experiment my code a little deeper. thanks again