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 trialolivier david
417 Pointscompletely lost
in my workspace my code has no effect and in my code challenge I have changes when I change values. But I cant seem to figure what values to put to make it look good. The gray box is not the same sixe as my image and my images are way too big. Thank you so much for helping me.
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: ‘Changa One’, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
/***********************************************
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
}
10 Answers
Sage Elliott
30,003 Pointsgot it! All or most of you list item tags "li" are revered. they are "il". I reversed with google crome dev tool and it made a big difference on your site! See if that fixes teh changes you were looking for!
Sage Elliott
30,003 PointsOne error in your code is there is an extra colon: in your css img styling
img {
max-width:: 100%;
}
It should only have one, like this.
img {
max-width: 100%;
}
Your border color also has a double colon:
go through your code and remove all the doubles!
Sage Elliott
30,003 Points/***********************************************
GENERAL
***********************************************/
body {
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration:none
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
img {
max-width: 100%;
}
/***********************************************
heading
***********************************************/
#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;
}
/***********************************************
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
***********************************************/
a {
color: #6ab47b;
}
/***********************************************
header
***********************************************/
header {
background:#6ab47b;
border-color: #599a68;
}
h1, h2 {
color: #fff;
}
nav {
background:#599a68;
}
nav a, nav a:visited {
color: #fff;
}
/*slected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
/***********************************************
SITE BODY
***********************************************/
body {
background-color: #fff;
color: #999;
}
Sage Elliott
30,003 PointsHey, no problem! If you're feeling frustrated don't worry, it gets easier as you go and you'll learn what to look for when you run into problems! We've all made errors like this and it get be really annoying when you're starting out, but don't let it discourage you. :)
Sage Elliott
30,003 PointsIn your workspace file is the css under a folder? If it is make sure the HTML matches up to import it in. Could you post your HTML as well? If your CSS is in a css folder the html would look similar to this. Make sure there are no caps or other differences in your folder/file names.
<link rel="stylesheet" type="text/css" href="css/main.css">
olivier david
417 PointsMy full HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Olivier David | Designer</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>Olivier David</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">
<il>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</il>
<il>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</il>
<il>
<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>
</il>
<il>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using photoshop brushes.</p>
</a>
</il>
<il>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shape using repetition.</p>
</a>
</il>
</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 Olivier David.</p>
</footer>
</div>
</body>
</html>
css
/***********************************************
GENERAL
***********************************************/
body {
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration:none
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
img {
max-width:: 100%;
}
/***********************************************
heading
***********************************************/
#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;
}
/***********************************************
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
***********************************************/
a {
color: #6ab47b;
}
/***********************************************
header
***********************************************/
header {
background:#6ab47b;
border-color:: #599a68;
}
h1, h2 {
color: #fff;
}
nav {
background:#599a68;
}
nav a, nav a:visited {
color: #fff;
}
/*slected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
/***********************************************
SITE BODY
***********************************************/
body {
background-color: #fff;
color: #999;
}
And yes my Main.css is in my css folder.
Sage Elliott
30,003 PointsDoes it use a capital "M" in the file name?
olivier david
417 PointsNo it doesnt.
olivier david
417 PointsAnd this is my website: http://port-80-6lge7fh6qu.treehouse-app.com/
olivier david
417 PointsYes I just noticed I had a few double-colons. That's weird lol. Now it's removed. But my code still didn't change anything.
olivier david
417 PointsWhoa! Thanks alot my friend it changed everything. :)
olivier david
417 PointsThanks, Just started yesterday. I had never written a line of code in my life before. It's a continuous puzzle and I love it!
Sage Elliott
30,003 PointsAwesome! Welcome to the programming world! Treehouse is a great place to start and the forums are great to get your questions answered! Have fun!!!