Gallery not appearing like tutorial

Question

I am not sure what I am missing. The images are overlapping each other, and basically have become one bigger column. Not sure what I am missing.

Answer 1 · 2016-01-30T19:23:46Z

January 30, 2016 7:23pm

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

**********************************/ a { text-decoration: none; }

wrapper {

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

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

image { max-width: 100%; }

/********************* Header *********************/

logo {

text-align: center; margin:0; }

h1 { font-family: 'Roboto', sans-serif; margin: 15px 0; font-size: 1.7em; }

/********************* 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-color: #599a68; }

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

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

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

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

/* green header */ header { background: #6ab47b; border-color: #599a68; }

/**************** Footer *****************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

Answer 2 · 2016-01-28T05:23:52Z

January 28, 2016 5:23am

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

**********************************/ a { text-decoration: none; }

wrapper {

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

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

image { max-width: 100%; }

/********************* Header *********************/

logo {

text-align: center; margin:0; }

h1 { font-family: 'Roboto', sans-serif; margin: 15px 0; font-size: 1.7em; }

/********************* 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-color: #599a68; }

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

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

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

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

/* green header */ header { background: #6ab47b; border-color: #599a68; }

/**************** Footer *****************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

Answer 3 · 2016-01-28T05:24:01Z

January 28, 2016 5:24am

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>No Cuts, No Glory | Alex Gets Fit</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700italic,900,900italic,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <h1>Alex Cleanthous</h1> <h1>Cut weight and grow</h1> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="index.html">About</a></li> <li><a href="index.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</p> </a>
</li> <li> <a href"img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Experimentation2</p> </a>
</li> <li> <a href"img/number-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Experimentation4</p> </a>
</li> <li> <a href"img/number-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Experimentation4</p> </a>
</li> <li> <a href"img/number-12.jpg" alt=""> <img src="img/numbers-12.jpg" alt=""> <p>Experimentation5</p> </a>
</li> </ul> </section> <footer> <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Alex Cleanthous</p> </footer>
</div> </body> </html>

Answer 4 · 2016-01-28T07:08:13Z

January 28, 2016 7:08am

It looks like you haven't opened the section

Answer 5 · 2016-01-28T19:40:11Z

January 28, 2016 7:40pm

2 things. First, in your CSS, after the color: #bdc3c7 (also color: #fff) there isn't a semicolon. Second, in your HTML, after the href attribute (and before the file path (for the images)) there is no =. Fix these and you should be good.

Answer 6 · 2016-01-30T19:22:42Z

January 30, 2016 7:22pm

I'm still stuck. I've made all the above changes.

CSS - added semi colons HTML - added opening section and "=" to image file paths.

Any other suggestions? Thanks for your help! I'm stuck

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>No Cuts, No Glory | Alex Gets Fit</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700italic,900,900italic,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <h1>Alex Cleanthous</h1> <h1>Cut weight and grow</h1> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="index.html">About</a></li> <li><a href="index.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</p> </a>
</li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Experimentation2</p> </a>
</li> <li> <a href="img/number-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Experimentation4</p> </a>
</li> <li> <a href="img/number-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Experimentation4</p> </a>
</li> <li> <a href="img/number-12.jpg" alt=""> <img src="img/numbers-12.jpg" alt=""> <p>Experimentation5</p> </a>
</li> </ul> </section> <footer> <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Alex Cleanthous</p> </footer>
</div> </body> </html>

Answer 7 · 2016-01-31T04:12:35Z

January 31, 2016 4:12am

Just out of curiosity are you including all of your code?

Answer 8 · 2016-02-01T17:13:19Z

February 1, 2016 5:13pm

Hello Dino. Yes, I am putting all my code up. Any idea what is causing my issue? Thanks for your help. Tonight I am going to download the code from the tutorial and compare what I've created, and see if there is something I am clearly missing.

Answer 9 · 2016-02-02T14:54:43Z

February 2, 2016 2:54pm

Hi Alex,

It looks like you are missing some a <body> </body> tag for your html. Also, you do not have a div container with id "wrappe" to wrap the whole lot in, which is probably why your id for #wrapper is not doing much. It should look something like this I believe: Start from just after the <header> and end just after your <footer>

Edit: For some reason it won#t actually post the first div container even though it is included, <div id="wrapper>

<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 text</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-0.jpg" alt=""> <p>Playing with blending modes in Photoshop</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Tryig to create an 80 style glow</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created by photoshop brush</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Something else made with Photoshop</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/randomusr"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/markbojesen"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2016 Mark Bojesen</p> </footer> </div>

Welcome to the Treehouse Community

Looking to learn something new?

Alex Cleanthous

Alex Cleanthous

Gallery not appearing like tutorial

Dino Heras

Dino Heras

9 Answers

Alex Cleanthous

Alex Cleanthous

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

Alex Cleanthous

Alex Cleanthous

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

Alex Cleanthous

Alex Cleanthous

Dino Heras

Dino Heras

Christopher Sea

Christopher Sea

Alex Cleanthous

Alex Cleanthous

Dino Heras

Dino Heras

Alex Cleanthous

Alex Cleanthous

Mark Bojesen

Mark Bojesen