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
Jeff Robbins
Courses Plus Student 431 Pointsgreen header on just contact page not flush with top
was doing a css lesson adding iconography and noticed that green header is all of sudden not flush with top on just this page, allowing for white space at top. Here's the code.
<!DOCTYPE> <HTML> <HEAD> TAGS ARE THERE. screen shot isn't showing them for some odd reason
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jeff Robbins | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://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>Jeff Robbins</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" >Portfolio</a></li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<h3> General Information</h3>
<p>I am available for weddings and Bar Mitzvahs</p>
<p>Please call or use Twitter and email</p>
</section>
<section>
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-2000">555-2000</a></li>
<li class="mail"><a href="mailto:myemail@aol.com">myemail@aol.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=sillyssoftnews">@sillyssoftnews</a></li>
</ul>
</section>
<footer>
<a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
<a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
<p>© 2015 Jeff Robbins.</p>
</footer>
</div>
</body>
</html>
Jeff Robbins
Courses Plus Student 431 PointsHere's the css, Julie
/***************************
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 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 {
clear: both;
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/***************************
PAGE: CONTACT
***************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
/***************************
COLORS
***************************/
/* site body */
body {
background-color: white;
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;
}
7 Answers
Mark Pryce
8,804 Pointsgallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5 /*missing your ; */
color: #bdc3c7 /*missing your ; */
}
gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7 /*missing your ; */
}
Also I believe I have found your issue. it lies with your h3 tags they have a set margin of 18.*** try using this..
h3 {
margin: 0;
}
Though I can't completely remember how the course goes make sure the tutor has called these elements h3 also, if he has then he should cover the fixing of this margin soon so just double check and don't get to far ahead of yourself.
Hope the head scratching can stop now. Happy coding.
Edit: for future debugging reference use Google development tools it can show you what's affecting certain parts of your page and it's showing me that a default margin is set to h3 .. don't know why though lol.
Julie is right also you are not declaring your Id and class selectors. At least not in your case you've pasted.
/* if gallery is a class it should be */
.gallery
/*wrapper should be*/
#wrapper
/* your logo should be */
#logo
Maximillian Fox
Courses Plus Student 9,236 PointsYou are missing your opening HTML tags, your head tags, and your opening body tag :)
Jeff Robbins
Courses Plus Student 431 PointsNah, they are there. for some reason, it got cut off in the screen shot
Maximillian Fox
Courses Plus Student 9,236 PointsCan you send the update of your code (just edit it and re-add the HTML in) and I will take a look.
Jeff Robbins
Courses Plus Student 431 Pointswhen i went to edit question to see hy opening tags were not showing up in pic, they were all there in code. here you go.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jeff Robbins | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://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>Jeff Robbins</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" >Portfolio</a></li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<h3> General Information</h3>
<p>I am available for weddings and Bar Mitzvahs</p>
<p>Please call or use Twitter and email</p>
</section>
<section>
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-2000">555-2000</a></li>
<li class="mail"><a href="mailto:myemail@aol.com">myemail@aol.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=sillyssoftnews">@sillyssoftnews</a></li>
</ul>
</section>
<footer>
<a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
<a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
<p>© 2015 Jeff Robbins.</p>
</footer>
</div>
</body>
</html>
Jeff Robbins
Courses Plus Student 431 Pointsscreenshot keeps cutting off opening tags.
Julie Myers
7,627 PointsAdd the following code into your body rule:
body {
margin: 0;
}
Let me know if that worked and then I'll know for sure what the cause is.
Jeff Robbins
Courses Plus Student 431 PointsI tried these all in main.css
first in body part-- didn't fix
then i tried it site body, green header, and also in contact page. still no luck
Julie Myers
7,627 PointsWhen you copied you css it is missing some syntax. For example, the wrapper rule is missing the dot to say that it is a class. Is the coding you have on your computer showing the same thing? Could you redo your css so that it is in the black box? Don't use a screen shot to copy your css coding. Could you copy and paste it with your mouse?
Jeff Robbins
Courses Plus Student 431 PointsHi Julie,
I do not know what is wrong with Treehouse site. I have copied and pasted it a few times. The code is there when I drop it in. After it is posted, it's cutting off some of the syntax
For example, wrapper has an id tag (#), but it is not showing
Julie Myers
7,627 PointsWell, as long as all of the correct coding is there that is all I need to know.
Adding margin: 0; in the body selector should have fixed the issue. Try one more thing. Comment out:
<link rel="stylesheet" href="css/normalize.css">.
It might not be working right. Then add margin:0; in the body selector again. Let me know if that works. If it doesn't, then I'm not sure.
The only other thing I can think of is you are running your code in the work space TreeHouse supplies. If that is so, copy and paste all of the coding onto your computer and see how that works. The work space can be kind of buggy.
Mark Pryce
8,804 PointsWas it flush before? I know the when you start this project that the white space was deliberate and he sorts it out in a later video.
Happy coding.
Jeff Robbins
Courses Plus Student 431 PointsHi Mark,
that's the weird thing. as I went along they all became flush as they're supposed to. After applying a bunch of CSS on this particular exercise, I noticed that the contact page was no longer flush, while all the other pages remained flush. This makes me think that it's an HTML issue on the contact page. However I didn't change any of the HTML. Really confounded. I appreciate you emailing me and hopefully soon I will get back to happy coding after I stop scratching my head LOL.
Mark Pryce
8,804 PointsIs it still happening? Let me get on my laptop and I'll investigate.
Is it just the contact page?
Jeff Robbins
Courses Plus Student 431 Pointsthanks a million, Mark. I fixed what you told me to fix it and it worked. I'll have to Google what Google development tools are for figuring out problems on my page in the future. Have not got that far. I've always used hashtags for ID and Dots for class, but for some reason it wasn't pasting it correctly into that box when I posted it. Even though it showed them once I pasted it, the second I hit post it wasn't showing them for some weird reason.
Julie Myers
7,627 PointsJulie Myers
7,627 PointsCould you post your css coding as well?