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
Bryan Valencia
Full Stack JavaScript Techdegree Student 4,733 PointsWhite space above my header has not disappeared after following CSS instructions
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!--<div> is a content divider. Use when creating new sections to create distinctions-->
<div id="wrapper">
<section id="gallery">
<ul>
<li>
<!--This anchor when clicked takes the user to a page with only the photo-->
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<!--When a caption is created, alt= descriptions are not necessary-->
<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>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
</ul>
</section>
<footer>
<!--Here you anchored the twitter logo picture with a link to your twitter profile-->
<a href="https://twitter.com/bryvl">
<!--Exactly like earlier image entry-->
<img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="https://www.facebook.com/Bryan31Valencia"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© Bryan Valencia 2014.</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 {
margin:15px 0;
font-family: ‘Raleway’, sans-serif;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
header {
background: brown;
border-color: maroon;
float:left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
/********************
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;
padding-top: 50px;
color: #999;
clear: both;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/********************
Colors
*********************/
h1, h2 {
color: #fff;
}
nav {
background-color: maroon;
}
nav a {
color: #fff;
}
nav a, nav a:visited {
color: #fff;
}
nav a.selected, nav a:hover {
color: #ff0044;
}
body {
background-color: #fff;
}
/********************
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: #aaa;
}
/********************
About
*********************/
.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
/********************
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;
}
hope this works
My "about.html" page and "contact.html" page don't have the space at the top and are fine. Am I blanking out over something really obvious that's specific to the Portfolio/index?
Thanks in advance for all your help!
dnogmdehbp
Courses Plus Student 726 PointsWould you mind to post the whole code; of your html where it goes wrong?
and try to use code arround it, to make it more readable!
in Markdown Cheatsheet you'll find the shortcut for it.
Bryan Valencia
Full Stack JavaScript Techdegree Student 4,733 Points <li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!--<div> is a content divider. Use when creating new sections to create distinctions-->
<div id="wrapper">
<section id="gallery">
<ul>
<li>
<!--This anchor when clicked takes the user to a page with only the photo-->
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<!--When a caption is created, alt= descriptions are not necessary-->
<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>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
</ul>
</section>
<footer>
<!--Here you anchored the twitter logo picture with a link to your twitter profile-->
<a href="https://twitter.com/bryvl">
<!--Exactly like earlier image entry-->
<img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="https://www.facebook.com/Bryan31Valencia"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© Bryan Valencia 2014.</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 {
margin:15px 0;
font-family: ‘Raleway’, sans-serif;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
header {
background: brown;
border-color: maroon;
float:left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
/********************
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;
padding-top: 50px;
color: #999;
clear: both;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/********************
Colors
*********************/
h1, h2 {
color: #fff;
}
nav {
background-color: maroon;
}
nav a {
color: #fff;
}
nav a, nav a:visited {
color: #fff;
}
nav a.selected, nav a:hover {
color: #ff0044;
}
body {
background-color: #fff;
}
/********************
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: #aaa;
}
/********************
About
*********************/
.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
/********************
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;
}
hope this works
James Barnett
39,199 PointsFixed the code formatting
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Bryan,
You have your "gallery" id assigned to the section element when it should be assigned to the ul
<section id="gallery">
<ul>
This version of normalize used in the project adds a 1em top and bottom margin to ul's. It's this 1em top margin that produces the gap above your header. This happens because the header is floated and never cleared.
The following css gets rid of the margin so that you won't have the gap but in your case it's being applied to the section element and not the ul:
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
So you should be fine once you move the id to the ul.
A way to more permanently fix the problem is to have the first element after your header clear the floated header. This is your wrapper div. Then a top margin on your ul won't cause a gap above the header because the wrapper div is forced down below the header.
#wrapper {
clear: both; /* Add this */
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
Bryan Valencia
Full Stack JavaScript Techdegree Student 4,733 PointsThanks! It was way too satisfying seeing the white space go away.
sage stoker
2,405 PointsThats what happen to me just go through and make sure you don't have a period or a space thats not or something 2 times
Bryan Valencia
Full Stack JavaScript Techdegree Student 4,733 Pointssorry man, I've checked and my code looks pretty pristine.
dnogmdehbp
Courses Plus Student 726 PointsCan you change ''' to ``( theis located next to the "1" key (qwerty-keybord))
Rich Donnellan
Treehouse Moderator 27,740 PointsBryan, you'll need to edit your post to get the formatting correct. Or, just using mine.
It may also be helpful if you post your HTML code here too.
Tip: Make sure the opening (3) backticks/html are on its own line, as well as the closing (3) backticks. It also looks like you were using apostrophes. The backticks are the first key in the number row.
```css (or intended language)
code goes here
```
/******************** 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 { margin: 15px 0; font-family: ‘Raleway’, sans-serif; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
header { background: brown; border-color: maroon; float:left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
/******************** 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; padding-top: 50px; color: #999; clear: both; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/******************** Colors *********************/
h1, h2 { color: #fff; }
nav { background-color: maroon; }
nav a { color: #fff; }
nav a, nav a:visited { color: #fff; }
nav a.selected, nav a:hover { color: #ff0044; }
body { background-color: #fff; }
/******************** 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: #aaa; }
/******************** About *********************/
.profile-photo { display: block; margin: 0 auto 30px; max-width: 150px; border-radius: 100%; }
/******************** 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; }
Garrett Sanderson
12,735 PointsGarrett Sanderson
12,735 PointsIt would be easier to help you if you could paste in your html and css for the pages.