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
Jordan McCullough
462 PointsProfile photo behaving oddly
So in the video, there is space between the nav bar and his profile picture. On my page, the picture is touching the bottom of the nav bar. Should I post code here, or?
/**************************************
GENERAL
**************************************/
body {
font-family: 'Slabo 27px', serif;
}
a {
text-decoration: none;
color: #0044ee;
}
#wrapper {
margin: 0;
max-width: 940px;
padding: 5%;
}
img {
max-width: 100%;
}
/****************************************
HEADING
****************************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
margin: 0;
text-align: center;
}
h1{
font-family: 'Oswald', sans-serif;
margin: 15px;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
p {
margin: 15px 0;
}
/****************************************
NAVIGATION
****************************************/
nav {
font-family: 'Oswald', sans-serif;
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: 700;
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: 20px;
}
/****************************************
COLORS
****************************************/
/* site body */
body {
background-color: #fff;
color: #aaa;
}
header {
margin: 0;
background: #46AEBB;
border-color: #469EB7;
}
h1, h2 {
color: #FFF;
}
nav {
background: #469EB7;
}
nav a, nav a:visited {
color: #444444;
}
nav a.selected, nav a:hover {
color: #46EBAA;
}
Jordan McCullough
462 PointsJust added it. Sorry if it's too much text.
Robert Richey
Courses Plus Student 16,352 PointsI fixed the markdown so that it will benefit from syntax highlighting by adding a language specifier after the triple backticks.
After going over your code, I'm not seeing anything obvious. Can I have you post a link to the preview page from your workspace? Consider removing any personal information from your Web page that you don't want made available.
7 Answers
Josip Dorvak
18,126 PointsNot sure how the actual page looks at the moment, but try adding margin to the bottom of the nav element.
nav {
font-family: 'Oswald', sans-serif;
text-align: center;
padding: 10px 0;
margin: 20px 0 0; /*Change this to margin: 20px 0 20px;*/
}
The last value in the margin property is bottom margin. You can also adjust the 20px to a higher/lower value to suit your preferences
Jordan McCullough
462 Pointshttp://i.imgur.com/DA3RuMd.png
This is how it is currently displaying.
And Josip, I tried your suggestion, but it just stretched the bar down more
Josip Dorvak
18,126 PointsIs the nav contained within the header? If it is add the margin-bottom to the header element, or whatever the parent container of the nav element is
Josip Dorvak
18,126 PointsOrrrr you can add a margin-top property to the image itself as that will have the same effect as adding a bottom margin on the nav
Jordan McCullough
462 Points <header>
<a href="index.html" id="logo">
<h1>Jordan McCullough</h1>
<h2>Web Developer</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>
here is the html for the header, nav is inside
Josip Dorvak
18,126 PointsEverything seems to be alright. It "MAY" be a caching issue..but not 100% sure. Try clearing your browsers cache and see if that helps
Jordan McCullough
462 PointsJust tried clearing the cache, sadly it didn't solve the problem. This is strange. I've been pouring over the css and editing the values of all the things that I thought could be responsible for this, to no avail. Strange.
Anyways, I appreciate you looking over this! Thanks for that.
Josip Dorvak
18,126 PointsOHHH....are you using firefox?
if you are make this change
.profile-photo {
clear: both; /*Add this line*/
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 20px;
}
Jordan McCullough
462 PointsNah, I'm using chrome. I tried that anyways, but nothing changed.
Jordan McCullough
462 PointsGOT IT. I added some top padding to the image and it worked out. Thank you for the help! I probably never would have looked at the img tag if you hadn't suggested editing the image's margins. I appreciate it.
Josip Dorvak
18,126 PointsHaha no problem. Not even sure why padding was the issue but then again, I'm not even close to being good at web development lol.
Jordan McCullough
462 PointsI have no clue either. Well, looking at other people's code and trying to solve problems is supposed to be a great way of studying, so good on you!
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsHi Jordan,
Yes, please post your code so we can try and figure it out.
Cheers