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
Ben Payne
795 PointsHelp with header gap
've gone back through the videos to find where Nick gets rid of the gap at the top of the header
using this css:
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
Mine is that, which is identical, and yet the gap remains. Help please
Ben Payne
795 PointsWhat should I change in the HTML?
ixrevo
32,051 PointsI mean you should provide a listing of your code. Entire index.html and main.css files would be preferable. Then I'll try figure out what's wrong with this gap.
Ben Payne
795 PointsCSS:
/************************************************** 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%; }
h3 {
margin: 0 0 1em 0;
}
/************************************************** 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: #fff; color: #999; }
/* Green header */ header { background-color: #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; }
Ben Payne
795 PointsHTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ben Payne | Designer</title>
<link rel="stylesheet" href="css/normalise.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- <link rel="stylesheet" href="css/alternate-colors.css"> -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800|Changa+One:' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Ben Payne</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/small profile pic.jpg" alt="photograph of Ben Payne" class="profile-photo">
<h3>About</h3>
<p>Hey, I'm Ben Payne. I'm an aspiring web designer, learning from Treehouse.com. Besides learning web design, I enjoy playing video games, spedning time with my family and girlfriend, and more.</p>
<p>If you'd like to follow me on twitter my username is <a href="http://twitter.com/Ben_WebDesigner">@Ben_WebDesigner</a>.</p>
</section>
<footer>
<a href="http://twitter.com/Ben_WebDesigner"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/100008291653419@facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Ben Payne.</p>
</footer>
</div>
</body>
</html>
ixrevo
32,051 PointsOk. If you click on "Markdown Cheatsheet" (placed below an answer text area) there will be described how to correctly insert code on this forum. Try it, please and your code listing will look like this:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<!-- and so on... -->
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
There is a screenshot of the Markdown Cheatsheet
Otherwise Forum engine strips html tags as you can see.
Ben Payne
795 PointsSo I have to add <?php language_attributes(); ?> ?
ixrevo
32,051 PointsBen, look at your answer with your HTML code, please.
It seems to be broken, doesn't it?
All html tags have been removed.
Ben Payne
795 PointsHmm I hadn't realized that they'd gone when I'd copied and pasted it, it doesn't look like that in my workspaces
ixrevo
32,051 PointsYou should wrap your code with 3 back ticks (<pre>```</pre>) on the line before and after.
8 Answers
ixrevo
32,051 PointsOoh! It seems I know what causes this gap.
Find line where you link normalize.css
It should be like this:
<link rel="stylesheet" href="css/normalize.css">
but you misspelling like that: normalise.css
Fix it and gap will disappear.
normalize.css contains css that reset default browser styles. Web-Kit browsers (Safari and Chrome) apply default 8px padding to body element that causes this annoying gap.
It's completely ok that you don't know something yet. I'm for example noob in English :) It's not my native language and i've learnt it on my own.
ixrevo
32,051 Points...
Ben Payne
795 Points<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 colour 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 by using photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Experimentation with colour and texture.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/Ben_WebDesigner"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/100008291653419@facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Ben Payne.</p>
</footer>
</div>
</body>
</html>
Hopefully it doesn't change it agaim
Ben Payne
795 PointsWhat is happening? If I paste this anywhere else it works that's not even what I copied
Ben Payne
795 PointsIs there another way I can contact you? I can't send my code here without it changing
Ben Payne
795 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ben Payne | Designer</title>
<link rel="stylesheet" href="css/normalise.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- <link rel="stylesheet" href="css/alternate-colors.css"> -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800|Changa+One:' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Ben Payne</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 colour 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 by using photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Experimentation with colour and texture.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/Ben_WebDesigner"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/100008291653419@facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Ben Payne.</p>
</footer>
</div>
</body>
</html>
Ben Payne
795 PointsIt's not laid out the same but at least you can see the code now. Thanks for putting up with me I'm a complete noob at this
Ben Payne
795 PointsThank you so much for your help, I can get back to coding now :) And your english is very good, if you hadn't have said I would never have known :)
ixrevo
32,051 PointsCool! Good luck in learning!
ixrevo
32,051 Pointsixrevo
32,051 PointsI believe your code html+css would help to resolve this more quickly.