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 trialAlex Cleanthous
1,658 PointsGallery not appearing like tutorial
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.
9 Answers
Alex Cleanthous
1,658 Points/********************************** 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; }
Alex Cleanthous
1,658 Points/********************************** 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; }
Alex Cleanthous
1,658 Points<!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>
Dino Heras
8,381 PointsIt looks like you haven't opened the section
Christopher Sea
3,726 Points2 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.
Alex Cleanthous
1,658 PointsI'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>
Dino Heras
8,381 PointsJust out of curiosity are you including all of your code?
Alex Cleanthous
1,658 PointsHello 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.
Mark Bojesen
12,873 PointsHi 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>
Dino Heras
8,381 PointsDino Heras
8,381 PointsHello Alex,
Do you mind posting your code?