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
Alex Weinberg
2,726 PointsUnwanted space between header and top of browser window.
So I have a picture that I want in the top left corner and then the nav in the top right. I have the picture in my html first, and float left so the nav can be next to it. When I do this, a gap appears between the header and the top of the browser window. Any suggestions where I'm going wrong? Thank you. I've included the html, css, and a responsive css sheet I'm working on. This is when the screen is desktop size.
http://port-80-6zs79br0i9.treehouse-app.com/#main-nav
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fresh Track | Synth driven dance/funk/rock music</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body id="body">
<header>
<img src="img/freshtrackalex1.jpg" alt"freshtracklogo" id="freshtracklogo">
<p><a href="#main-nav" id="access_nav" class="access_aid">Skip to navigation</a></p>
<nav id="main-nav">
<ul class="nav">
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="dates.html">Dates</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<p><a href="#body" id="access_top" class="access_aid">Skip to top</a></p>
</nav>
</header>
<hr>
<div id="wrapper">
<section>
<img src="img/freshtrackalex4.jpg" id="homeimage">
</section>
<footer>
<a href="https://www.facebook.com/freshtracktothebrain/?ref=aymt_homepage_panel">
<img src="img/facebookicon.png" alt"Facebook Logo" class="social-icon">
</a>
<a href="https://www.instagram.com/freshtrackmusic/">
<img src="img/instagramicon.png" alt"Instagram Logo" class="social-icon">
</a>
<a href="https://www.youtube.com/watch?v=9Ii3NoOhZDQ">
<img src="img/youtubeicon.png" alt"Youtube Logo" class="social-icon">
</a>
<p>© 2016 Fresh Track.</p>
</footer>
</div>
</body>
</html>
/*************************************
General
*************************************/
body {
font-family: 'Open sans', sans-serif;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
#wrapper {
max-width: 940px;
margin: 50px 0 auto;
padding: 0 5%;
clear: both;
}
/*************************************
Header
*************************************/
header {
width: 100%;
margin: 0;
padding: 0;
}
/*Logo*/
#freshtracklogo {
margin: 0 20px 0 0;
width: 200px;
height: 150px;
display: none;
}
/*************************************
Nav
*************************************/
/*Nav*/
nav {
display: none;
width: 99%;
margin: 0 0 30px 0;
padding: 0;
}
nav ul {
width: 100%;
margin: 0;
padding: 0
}
nav li {
padding-top: 10px;
text-align: center;
height: 30px;
width: 100%;
margin: 0;
border-style: solid;
border-width: 3px;
border-color: #21759b;
background: #464646;
}
nav ul li a {
font-size: 1em;
display: inline-block;
padding: 0 100px;
font-weight: 800;
color: #21759b;
}
/*nav display/hide*/
#main-nav:target {
display: block;
}
/*Nav buttons*/
.access_aid {
display: block;
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 0;
padding-top: 40px;
overflow: hidden;
border: 1px solid #ccc;
background: #21759b 10px 10px / 20px 20px no-repeat;
}
#access_nav {
background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
}
#access_top {
background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
}
hr {
display: none;
}
/*************************************
Home page
*************************************/
#homeimage {
display: block;
margin: 0 auto;
}
/*************************************
Footer
*************************************/
footer {
padding-top: 50px;
text-align: center;
clear: both;
display: block;
}
.social-icon {
width: 30px;
height: 30px;
margin: 0 5px;
}
////////Responsive css////////
@media screen and (min-width: 660px) {
.access_aid {
display: none;
}
#freshtracklogo {
display: inline-block;
float: left;
}
nav {
display: inline-block;
width: 100%;
margin: 0;
}
nav li {
width: 13%;
display: inline-block;
padding: 5px 0;
text-align: center;
}
nav li a {
text-align: center;
padding: 0;
}
}
3 Answers
Kevin Goudswaard
11,061 PointsYou have a <p> div hanging out there above your picture. It is bumping everything down
<p><a href="#main-nav" id="access_nav" class="access_aid">Skip to navigation</a></p>
Alex Weinberg
2,726 PointsGreat. That was it, thank you!
Kevin Goudswaard
11,061 Pointsquite welcome! :)
Alex Weinberg
2,726 PointsAnother similar question... Now there's a huge gap to the right of my nav. I tried to do: nav li { width: 20%}, seeing how there are 5 buttons, they would take up equal space in the parent container, but it pushes one of the buttons down and there still seems to be plenty of space for the button to fit. I made the percentage smaller and they all fit on the same line, but there is still a bunch of empty space to the right. I can't figure out what's taking up that space.
Kevin Goudswaard
11,061 PointsKevin Goudswaard
11,061 Points<p><a href="#main-nav" id="access_nav" class="access_aid">Skip to navigation</a></p>