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
Wayne Durett
Courses Plus Student 985 Pointsdisplay
for some reason when I add the display: block ,ork, help please. element and style the picture disappears. also the image wont center .I've checked the margin property three times it wont w
Wayne Durett
Courses Plus Student 985 Points...html <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Jesse Durett | Designer</title> <link rel = "stylesheet" href ="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <link rel = "stylesheet" href ="css/main.css"> <style>
</style>
</head> <body> <header> <a href="index.html" id = "logo"> <h1>Jesse Durett</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href ="index.html" >Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html">Contact</a> </li> </ul> </nav>
</header>
<div id ="wrapper"> <section> <img src="img/me.jpg" alt = "Photo of Jesse Durett" class = "profile-photo"> <h3>About</h3> <p>Hello, I'm Jesse Durett. This is my Design Portfolio. I've been studying Computers and design for 10 yrs. I have in associates in Computer Science. I am dedicated and punctual. I believe my clients come first and aim to please. I would love a chance to work for you.</p> </section> </div> <footer> <a href = ""> <img src = "img/twitter-wrap.png" alt = "Twitter Logo"></a> <a href = ""><img src= "img/facebook-wrap.png" alt = "Facebook Logo"></a> <p>© 2014 Jesse Durett.</p>
</footer>
</body> </html> ...
...css
/*************************************************
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 ul li a{ font-weight:800; margin: 15px 10px; } /*************************************************
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; }
/*************************************************
PAGE: ABOUT **************************************************/ .profile-photo{ display: block; border-radius: 100%; margin: 0 auto 30px; max-width: 150px;
}
/*************************************************
COLORS **************************************************/
body{ background-color: #fff; color: #999; }
header{ background-color:#6ab47b; border-color:#599a68; }
nav{ background: #599a68; }
nav a, nav a:visited{ color:#fff; }
nav a.selected, nav a:hover { color: #32673f;
}
a { color: #6ab47b;
}
h1, h2 { color: #fff;
}
...
Wayne Durett
Courses Plus Student 985 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;
}
nav ul li a{
font-weight:800;
margin: 15px 10px;
}
/*************************************************
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;
}
/*************************************************
PAGE: ABOUT
**************************************************/
.profile-photo{
display: block;
border-radius: 100%;
margin: 0 auto 30px;
max-width: 150px;
}
/*************************************************
COLORS
**************************************************/
body{
background-color: #fff;
color: #999;
}
header{
background-color:#6ab47b;
border-color:#599a68;
}
nav{
background: #599a68;
}
nav a, nav a:visited{
color:#fff;
}
nav a.selected, nav a:hover {
color: #32673f;
}
a {
color: #6ab47b;
}
h1, h2 {
color: #fff;
}
Wayne Durett
Courses Plus Student 985 Points<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Jesse Durett | Designer</title>
<link rel = "stylesheet" href ="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link rel = "stylesheet" href ="css/main.css">
<style>
</style>
</head>
<body>
<header>
<a href="index.html" id = "logo">
<h1>Jesse Durett</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href ="index.html" >Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a> </li>
</ul>
</nav>
</header>
<div id ="wrapper">
<section>
<img src="img/me.jpg" alt = "Photo of Jesse Durett" class = "profile-photo">
<h3>About</h3>
<p>Hello, I'm Jesse Durett. This is my Design Portfolio. I've been studying Computers and design for 10 yrs. I have in associates in Computer Science. I am dedicated and punctual. I believe my clients come first and aim to please. I would love a chance to work for you.</p>
</section>
</div>
<footer>
<a href = ""> <img src = "img/twitter-wrap.png" alt = "Twitter Logo"></a>
<a href = ""><img src= "img/facebook-wrap.png" alt = "Facebook Logo"></a>
<p>© 2014 Jesse Durett.</p>
</footer>
</body>
</html>
1 Answer
Dustin Matlock
33,856 PointsIt's hard to tell what's going on with some of your html but below I have the original from the project files so you can compare code.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | 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>Nick Pettit</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>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.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>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 repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | 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>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
<h3>About</h3>
<p>Hi, I'm Nick Pettit! This is my design portfolio where I share all of my favroite work. When I'm not designing things, I enjoy exercising, playing video games, drinking good coffee, and more.</p>
<p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/nickrp">@nickrp</a>.</p>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
main.css
/**********************************
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%;
}
h3 {
margin: 0 0 1em 0;
}
/**********************************
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: 0.75em;
color: #bdc3c7
}
/**********************************
PAGE: ABOUT
***********************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/**********************************
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;
}
Wayne Durett
Courses Plus Student 985 PointsThank you ,maybe it has something to do with the image.
Dustin Matlock
33,856 PointsI just checked using your code and everything is working. You might make sure you have the correct file structure. You can always zip the project and upload it to GitHub or Dropbox and someone can check it for you that way.
Dustin Matlock
33,856 PointsDustin Matlock
33,856 PointsCould you possibly post your code?