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
Amanda Thompson
2,594 PointsProfile image has no space under nav bar - despite corrected code
Have been following along trying to replicate all the code structures. But have the following problem: the profile image appears squashed up top against the navigation bar. There is no space. I've pasted the supplied corrected (for the Firefox bug) CSS code from the Teacher's Notes, saved and refreshed the browser. Even tried relaunching teh workspace. But problem is still there. Also the same problem when I preview it in Safari.
If anyone can flag where I have made a mistake in the code I'd appreciate that very much. Thanks in advance for any help you can suggest.
HTML code of About page is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Nick Petitt | UX 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,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Nick Petitt</h1>
<h2>UX 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 Petitt" class="profile-photo">
<h3>About</h3>
<p>Hi, I'm Nick Petitt! This is my design portfolio where I share all of my favorite work. When I'm not designing I enjoy exercising, playng video games, drinking good coffee, and more.</p>
<p>If you'd like to follow me on Twitter my user name is <a href="http://wwww.twitter.com/nickrp">@nickrp</a>.</p>
</section>
<footer>
<a href="http://wwww.twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
<a href="http://wwww.facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
<p>© 2015 Nick Petitt</p>
</footer>
</div>
</body>
</html>
****************************************************************
CSS file is:
/****************************************
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 30 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.75 em;
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 {
clear: both;
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 devices */
nav {
background: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color:#6ab47b;
}
/* nav links */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
3 Answers
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsFixed the formatting for you. Have you made sure you are using 3 backticks (```) instead of 3 single quotes (''')? Backtick is the key to the left of 1 on the keyboard, might be in a slightly different place on some keyboards. Checkout this guide to markdown for more help with formatting.
To answer your question. In your css file around line 30, the styles for your header are:
header {
float: left;
margin: 0 0 30 0;
padding: 5px 0 0 0;
width: 100%;
}
You are missing 'px' from the margin value. Should be:
header{
margin: 0 0 30px 0;
}
That should fix it.
Hope this helps :)
Amanda Thompson
2,594 PointsThank you indeed! :) Yes, that did the trick. I hadn't noticed that the 'px' was missing from the header margin values. Everything had seemed to look okay in the pages leading up to this particular lesson so I completely totally missed that. Whoops! About your advice with the 'backticks' could you possibly clarify that? I didn't understand where in the code this appears, where I should have been using these characters? Much appreciated.
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsNo problem :)
The forum uses something called Markdown to handle formatting within posts.
When you make a post on the forum and want your code to look nicely formatted (with syntax highlighting - just like it looks in a text editor). You need to add 3 backticks (```) followed by what language you are using. Then add your code on a new line. You then end it with another 3 backticks on a new line.
This gif should help:
/* This is what formatted code looks like - the use of different colors is called syntax highlighting */
#aDiv {
background: blue;
}
A common mistake is to use single quotes (''') instead of backticks (```), which doesn't work.
More info on formatting posts with Markdown can be found here
Hope this helps :)
Amanda Thompson
2,594 PointsOkay, now I understand! Thanks very much for explaining that. The graphic was a helpful supporting illustration too. I'll try the backticks next time I post a question with code. And then the code sections should have clearer 'colors of the rainbow' look, rather than the ' train-wrecked phone book aesthetic' that I produced last time :) Cheers.
Amanda Thompson
2,594 PointsAmanda Thompson
2,594 PointsThe CSS code seemed to be mangled, half is missing wen I tried to post it in. Will try again. If anyone can show me where I have gone wrong I'd appreciate any guidance. Thanks.
-- removed duplicate code. James