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
Rachael Amarant
1,958 PointsAnnoying space around section
So I'm working on my first site, it seems to be going well although I can't seem to get rid of this annoying space around my section. Here's the code, if someone could explain why this is occurring and how to fix it that would be great.
HTML:
<head> <meta charset= "utf-8"> <title> Text </title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <header> <a href= "index.html"> <h1> Text </h1> </a> <nav> <ul> <li><a href="index.html"></a>Portfolio</li> <li><a href="about.html"></a>About</li> <li><a href="contact.html"></a>Contact</li> </ul> </nav> </header> <div> <section> <p>This will be my main page.</p> </section> <footer> <p> © Text </p> </footer> </div> </body> </html>
CSS:
h1 {
background: #660080;
color: #FFFFFF;
font-family: "Allura-Regular", serif;
}
nav { background: #D633FF; }
nav a { text-decoration: none; color: #E0B2F0; list-style: none; }
ul li { list-style-type:none; }
nav li { display: inline-block; }
a:hover { color: #660080; background-color: transparent; text-decoration: none; }
header { background: #AD33D6; margin: 15px 15px 15px 15px; }
section { background: #EB99FF; color: #660080; margin: 15px 15px 15px 15px; height: 350px; }
body { background: #F5CCFF; margin: 15px 15px 15px 15px; }
footer { background: #660080; color: #FFFFFF; margin: 15px 15px 15px 15px; }
2 Answers
Rachael Amarant
1,958 PointsWeird I know I don't have much HTML since I've only just started but I've definitely got those tags and they're not showing up here... is it cos I copied and pasted them from TextWrangler? I tried copying and pasting it again but it didn't do any good.
Daniel Rothery
3,440 PointsAre you surrounding your pasted code with the tags to display code on the forums? look at the "Markdown Cheatsheet"
Daniel Rothery
3,440 PointsI'm not sure why it isn't pasting :(
Try playing with your margins. You have 15px margins around many of your tags which is going to push other "boxes" away.
So for example if your code had tags:
<header></header>
<section>/section>
They would have a 30px gap between them with your code because of your margin tags.
Also note you have margins like:
footer {
margin: 15px 15px 15px 15px;
}
These can be shortened to:
footer {
margin: 15px;
}
Daniel Rothery
3,440 PointsOh bummer, missed an < in my section tag above!
Daniel Rothery
3,440 PointsDaniel Rothery
3,440 PointsYour code either hasn't pasted correctly or is written wrong. Could you re-post your full HTML code as its very difficult to see whats going wrong when much of it is missing.
(There's no HTML, HEAD, BODY, SECTION tags etc)