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 trialDov Breuer
8,268 PointsMy 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
Devin Cooper
8,352 Pointsshow your code please?...
Devin Cooper
8,352 Pointsi see your CSS. Can you post your HTML?
Devin Cooper
8,352 PointsWrap your code with 3 backticks (```) on the line before and after.
```
<p>This is code!</p>
```
Devin Cooper
8,352 Pointsdo you have a link to the website?
Devin Cooper
8,352 Points<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>
© 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...
Dov Breuer
8,268 Points<!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>
Dov Breuer
8,268 Pointsit's not coming through correctly...
Dov Breuer
8,268 Points<!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>
Dov Breuer
8,268 Pointsfinally got it right thank you
Dejan M
5,414 PointsWhere 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 ;)
Dov Breuer
8,268 Pointsit still doesn't work... i removed it and the photo is still pushed down... please help
Dov Breuer
8,268 PointsI 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
Dov Breuer
8,268 PointsDov Breuer
8,268 Points/************************************** 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; }
Dov Breuer
8,268 PointsDov Breuer
8,268 Points<!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>