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
Anthony c
20,907 PointsPhotos Not Lining Up Exactly
http://i.imgur.com/cBxSKYl.png
You can see above. my #gallery and #gallery li are both coded exactly as in the video
/*******************************
PAGE: PORTFOLIO
*******************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin:2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
James Barnett
39,199 PointsCode formatting fixed
Gloria Dwomoh
13,116 PointsThanks James :)
7 Answers
Gloria Dwomoh
13,116 PointsYes that's because there are errors in your HTML too. I'll add comments on the areas with the errors.
<header>
<header>
<a href="index/html" id="logo"> <!-- Mistake...make it "index.html" -->
<h1>Anthony Comito</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>
and
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with Color and Texture.</p>
</a>
</li>
<li> <!-- Erase this <li> it is not needed -->
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Experimentation with Color and Texture.</p>
</a>
so basically you have to remove one li and fix the index/html.
Anthony c
20,907 PointsThanks for the super fast response Gloria. I don't know if I understand the code-posting directions. Let me try to post the code again. (In the future, a video explanation of how to post code would be great!)
Gloria Dwomoh
13,116 PointsYes it will be nice to have that. You need backticks it is above the tab icon. You can see it above the tab keyboard note. You can see a screencast-gif of the process somewhere in this thread.
Ps. I need the HTML code too.
Anthony c
20,907 Points<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Anthony | Comito</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>Anthony Comito</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 Color and Texture.</p>
</a>
</li>
<li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Experimentation with Color and Texture.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Experimentation with Color and Texture.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Experimentation with Color and Texture.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Experimentation with Color and Texture.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href= http://twitter.com/a_comito><img src="img/twitter-wrap.png" alt="twitter logo"></a>
<a href= http://facebook.com/nickpettit><img src="img/facebook-wrap.png" alt="facebook logo"> </a>
<p>© 2014 Anthony Comito.</p>
</footer>
</div>
</body>
</html>
James Barnett
39,199 PointsIn the future, a video explanation of how to post code would be great!
There is in fact. You'll find it in the right-hand sidebar under the heading Tips for asking questions
Anthony c
20,907 Points/*******************************
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: '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;
}
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: .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;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673F;
}
Gloria Dwomoh
13,116 PointsOkay try to do these changes and let me know if you still have issues.
This part of your css end it with a semicolon
/* site body */
body {
background-color: #fff;
color: #999 /*here add semicolon */
}
and here change how you have written open sans
body {
font-family: 'open sans', sans-serif; /*change this to... font-family: 'Open Sans', sans-serif;*/
}
Anthony c
20,907 PointsThanks guys. The posting code wasn't as confusing as I thought. I now see the video is there too! thanks for the fast replies.
it still doesn't seem to be lining up. New CSS below.
/*******************************
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: '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;
}
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;
}
.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: .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;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673F;
}
Anthony c
20,907 PointsI just realized, it's just the first image not lining up:
Anthony c
20,907 PointsGot it. There was an extra <li> after the first list item and before the second list item (and the <li> was not closed out)
Gloria Dwomoh
13,116 PointsGloria Dwomoh
13,116 PointsCan you show us your HTML code too?
Try using this to help you post your code better as some tags get missing if you don't do it as shown in this post - Posting code in the forum ..