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 trialIvan Poblete
1,149 PointsHeader goes below dark green navigation bar.
After entering code this code: header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100% }
9 Answers
Erik Nuber
20,629 Pointscan you share the rest of the html file. your info here is how it is in the video
if you can place them between three ` on top and bottom this will place your code in a black box that is the tick marke below the tidle key next to the one.
Ivan Poblete
1,149 PointsSorry, i'm not sure exactly what you're saying.
Erik Nuber
20,629 PointsIn order to share your code you need to place it between on both the top and bottom of your code. If you just paste it into the conversation it will come out a mess. The
are the little tick marks next to the one key on your keyboard.
Ivan Poblete
1,149 PointsGot it. Which part of the html would you like to see?
Erik Nuber
20,629 Pointscould you share both the html and css files. I should have originally said css.
Ivan Poblete
1,149 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ivan Poblete | 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>Ivan Poblete</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 Photshop 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="https://twitter.com/espn"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="https://www.facebook.com/ESPN"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Ivan Poblete.</p>
</footer>
</div>
</body>
</html>
Ivan Poblete
1,149 Points/************************
GENERAL
************************/
body {
font-family: 'Open Sans', san-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;
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;
}
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;
}
/************************
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 link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
Erik Nuber
20,629 PointsStill looking but two things right off the bat in the css
under the header {} you need to add a semi colon after width
under nav, you are creating a margin top and bottom of 20px and 0 left or right, you need to add a 0 which will make top 20px, 0 left and right and 0 bottom, this might fix your problem.
Ivan Poblete
1,149 PointsI made these changes. It got better but is still hanging below the dark green nav bar.
Erik Nuber
20,629 Pointsplease let me know if that worked as all else looks okay.
Erik Nuber
20,629 PointsOk, how about doing a snapshot of your workspace so I can edit the code and see what else I can figure out.
To do that, go to your open workspace and, on the right side there is an icon that looks like a camera click it and, it will allow you to share. Post it and I will get back to you.
Unfortunately I am on my way out the door for a bit and will look when I get back, should be less than an hour.
Ivan Poblete
1,149 PointsHere you go: https://w.trhou.se/2x14vxg1ky
Thank you!
Erik Nuber
20,629 PointsI found the problem, I missed it my first time thru..
in your Header you also have padding set to 5px for top and bottom, you need to make it 5px 0 0 and that will take care of.
Ivan Poblete
1,149 PointsFixed! Thanks for all your help Erik!