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 trialKirolos Sadallah
540 PointsIs my HTML causing the problem?
So my website currently looks like this: http://imgur.com/a/SPejz When I copy and paste the video's CSS into main.css it doesn't change the look of it it at all. When I tried replaceing the html with the file provided, the website then looked as it should. I can't seem to pinpoint what the problem is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kirolos Sadallah | 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>Kirolos Sadallah</h1>
<h2>Designer</h2>
</a>a
<nav>
<ul id="gallery">
<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>
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Exper w/ color and text</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Blending</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>80's</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips</p>
</a>
</li>
<li>
<a href="img/numbers-012.jpg">
<img src="img/numbers-012.jpg" alt="">
<p>Shapes</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><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 Kirolos Sadallah.</p>
</footer>
</div>
</body>
</html>
/********************************** 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 ***********************************/
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; }
/********************************** FOOTER ***********************************/
footer { font-size: 0.75em; text-align: center; 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; }
/********************************** 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; }
4 Answers
Chyno Deluxe
16,936 PointsOk. So i made the changes to your code and a few things were missing and a couple things were added.
Your HTML: Most of the HTML was correct with the exception of your gallery id being misplaced. You placed it in the nav ul rather than where the images were being placed. Your finished HTML should look like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kirolos Sadallah | 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>Kirolos Sadallah</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>Exper w/ color and text</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Blending</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>80's</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips</p>
</a>
</li>
<li>
<a href="img/numbers-012.jpg">
<img src="img/numbers-012.jpg" alt="">
<p>Shapes</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><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 Kirolos Sadallah.</p>
</footer>
</div>
</body>
</html>
Now on to the CSS.
The CSS was mainly the reason why you weren't getting the results you wanted.
the CSS was correct but you forgot to place a # for ids(e.g. logo, gallery). I also included na ul to the #gallery css so that the bullet points were removed from the nav as well. Your finished CSS should look like this.
/********************************** 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 ***********************************/
#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;
}
/********************************** FOOTER ***********************************/
footer {
font-size: 0.75em;
text-align: center;
padding-top: 50px;
color: #ccc;
clear: both;
}
/********************************** PAGE: PORTFOLIO ***********************************/
nav ul,
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
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;
}
Let me know if this solves your problems. if you have any question feel free to ask and if my answer helped get you to were you need to be please be sure to mark my answer as the best answer.
Chyno Deluxe
16,936 PointsThere are a few HTML elements missing from your code including the html, head and body tags and could be the reason you are not getting the results you're after. Try this. Let me know if this helps and if not what problems you continue to have after making the changes below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kirolos Sadallah | 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>Kirolos Sadallah</h1>
<h2>Designer</h2>
</a>
<nav>
<ul id="gallery">
<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>
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Exper w/ color and text</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Blending</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>80's</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips</p>
</a>
</li>
<li>
<a href="img/numbers-012.jpg">
<img src="img/numbers-012.jpg" alt="">
<p>Shapes</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><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 Kirolos Sadallah.</p>
</footer>
</div>
</body>
</html>
Kirolos Sadallah
540 PointsI replaced the code but the site still looks the same :( Here's a snapshot also https://w.trhou.se/8dk977qrm6
Chyno Deluxe
16,936 PointsWhat problems are you having?
Kirolos Sadallah
540 PointsThe bullets are still there Images aren't floating and the directory is off
Chyno Deluxe
16,936 PointsAhh!! Ok I see the problem. I'll post the answer shortly.
Kirolos Sadallah
540 PointsKirolos Sadallah
540 PointsThanks so much!
Chyno Deluxe
16,936 PointsChyno Deluxe
16,936 PointsNo problem! Glad I could help. =)