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
Emily Easton
13,575 PointsSpace above page content.
I've looked through my html and css several times and just can't seem to figure out what is going on, there is a constant white space that is above any content below the header. But on my other pages there is more content on them and gets rid of the space? Sooo confused. Also if any recommendations as to how I could improve layout if need be would be great.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSSwithEME.com</title>
<meta charset="utf-8">
</head>
<body class="site">
<div id="wrapper" class="container">
<header>
<h1></h1>
<nav>
</header>
<form class="form">
TEXT
</form>
</div>
<footer class="footer">
</footer>
</body>
</html>
CSS:
/**************************************************
GENERAL
***************************************************/
html{
background-color: #d8d8d8;
}
body,
h1 {
margin: 0;
}
h4 {
font-family: 'Spirax', cursive;
font-size: 1.5rem;
}
li {
font-size: 1.5rem;
list-style-type: none;
}
* {
box-sizing: border-box;
}
/**************************************************
HEADER & FOOTER
***************************************************/
header{
background-color:#5e5e5e;
color:white;
text-align: center;
font-family: 'Spirax', cursive;
font-size: 1.5rem;
width:100%;
}
footer{
background-color:#5e5e5e;
color:white;
font-size: 1em;
text-align:center;
clear:both;
padding-top: 50px;
}
/**************************************************
PAGE: EXAMPLE
***************************************************/
---------------
/**************************************************
PAGE: FORM
***************************************************/
form {
width:100%;
padding:2rem;
}
button {
background-color:black;
color:white;
}
/**************************************************
NAV
***************************************************/
--------------
/**************************************************
DIV
***************************************************/
div p{
padding-left:15px;
padding-right:15px;
}
/**************************************************
MEDIA
***************************************************/
@media (min-width:600px) {
html,
body{
background-color:#785B4D;
color: white;
header,
footer {
color: white;
background-color: #A78772;
font-size:1.5rem;
width:100%;
margin:0;
}
@media (min-width:1500px){
html,
body{
background-color: #ffb2ff;
}
header,
footer {
background-color: #660066;
font-size:1.5rem;
}
/**************************************************
FLEXBOX
**************************************************/
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
width:100%;
}
.container {
flex: 1;
flex-wrap: wrap;
}
5 Answers
Benjamin Larson
34,055 PointsAh, that helped :)
I didn't realize it was the space below the header. It's not caused by any margin or spacing properties, it's from the flexbox.
See if changing your signup10.html to this helps -
<!DOCTYPE html>
<html>
<head>
<title>CSSwithEME.com</title>
<meta charset="utf-8">
<link rel="stylesheet" href="main10.css">
<link rel="stylesheet" href="proof10.html">
<link rel="stylesheet" href="about10.html">
<link rel="stylesheet" href="signup10.html">
<link rel="stylesheet" href="normalize.css">
<link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet">
</head>
<body class="site">
<header>
<H1>Sign Up Sheet</H1>
<nav>
<ul>
<li><a href="index10.html" id="side">Home</a></li>
<li><a href="about10.html" id="side">About</a></li>
<li><a href="proof10.html" id="side">Example</a></li>
<li><a href="signup10.html" class="selected" id="side">Sign Up</a></li>
</ul>
</nav>
</header>
<div id="wrapper" class="container">
<form class="form">
<label for="name">Name:</label>
<input type="text" id="name" name="username">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="useremail">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="userpassword">
<br>
<button type="submit">Sign Up</button> <button type="reset">Reset</button>
</form>
</div>
<footer class="footer">
<div id="footer">
<p>© 2017 CSS with EME</p>
</div>
</footer>
</body>
</html>
Benjamin Larson
34,055 PointsIs there any way you can post a screenshot of the white space you are encountering and/or the code for the pages that are displaying properly? I know you've been at this for awhile! I know there's an answer, I'm just not sure how you want it to be displayed or something is awry in your local environment.
Thomas Cooper
993 PointsAs per Benjamins comments, you don't need to link the html files in the css as you have done, only in the href links.
Your stylesheet links should only look as follows:
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main10.css">
Note the main10.css is under normalize.css.
Nijesh Nj
18,232 PointsThis may be caused because of the padding and margin of the text(the font size is little large). Try giving the header, margin of 0 and padding of 0;Maybe this will fix it.
margin: 0;
padding: 0;
If not,
It's better to inspect with chrome dev tools and check what is causing the real problem. I think you know how to, if not check out this.
Emily Easton
13,575 PointsIve tried this and it didn't work:(
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsHi Emily.
A few problems with your code:
<!DOCTYPE html>
<html>
<head>
<title>CSSwithEME.com</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css"> <!-- You have to link your CSS to the HTML or the rules won't be applied and make sure you use the filename you have and not test.css -->
</head>
<body class="site">
<div id="wrapper" class="container">
<header>
<h1></h1>
<nav></nav> <!-- You were missing </nav> tag ( the nav tag isn't self closing ) -->
</header>
<form class="form">
TEXT
</form>
</div>
<footer class="footer">
</footer>
</body>
</html>
I hope this helped you a bit. If you still have open questions ask away.
Regards, Nejc
Nijesh Nj
18,232 PointsI don't think so, will broken code will create padding or margin?
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsNijesh if the CSS isn't linked then a default browser styling will be applied. And the default for h1 tag is a margin with value 24.1167px is default for FireFox Developer edition for example.
And if you miss and leave a tag open like Emily did with nav then you can get very interesting display funny stuff :D
Emily Easton
13,575 PointsHello! Thank you for the advice, but I already had that in, I just removed bits so it just included most the relevant information but left the tags so you could see what was included! haha, thank you though:)
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsOh. :D
Well then :) Then it's a bit harder to help out :D Content makes a difference :)
Emily Easton
13,575 PointsIts doing it on two pages: Home and Sign Up.
Home (index10.html):
<!DOCTYPE html>
<html>
<head>
<title>CSSwithEME.com</title>
<meta charset="utf-8">
<link rel="stylesheet" href="main10.css">
<link rel="stylesheet" href="index10.html">
<link rel="stylesheet" href="about10.html">
<link rel="stylesheet" href="signup10.html">
<link rel="stylesheet" href="normalize.css">
<link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet">
</head>
<body class="site">
<header>
<H1>Ludwig Mies van der Rohe</H1>
<nav>
<ul class="">
<li><a href="index10.html" id="side">Home</a></li>
<li><a href="about10.html" id="side">About</a></li>
<li><a href="proof10.html" class="selected" id="side">Example</a></li>
<li><a href="signup10.html" id="side">Sign Up</a></li>
</ul>
</nav>
</header>
<section>
<ul>
<li>
<a href="ludwigmies.jpg">
<img src="ludwigmies.jpg" alt="">
</a>
</li>
</ul>
</section>
<div class="container">
<div class="item1 itemt">Born</div>
<div class="item1 item">March 27 1886 <br> Aachen, Kingdom of Prussia, German Empire</div>
<div class="item2 itemt">Died</div>
<div class="item2 item">August 17, 1969 (aged 83) <br> Chicago, Illinois, U.S.</div>
<div class="item3 itemt">Nationality</div>
<div class="item3 item">German (1886–1944) - American (1944–1969)</div>
<div class="item4 itemt">Occupation</div>
<div class="item4 item">Architect</div>
<div class="item5 itemt">Awards</div>
<div class="item5 item">Pour le Mérite (1959)<br>Royal Gold Medal (1959)<br>AIA Gold Medal (1960)<br>Presidential Medal of Freedom (1963)</div>
<div class="item6 itemt">Buildings</div>
<div class="item6 item">Barcelona Pavilion<br> Tugendhat House<br> Crown Hall<br> Farnsworth House<br> 860–880 Lake Shore Drive<br> Seagram Building<br> New National Gallery<br> Toronto-Dominion Centre<br> Westmount Square</div>
</div>
<footer class="footer">
<div id="footer">
<p>© 2017 CSSwithEME</p>
</div>
</footer>
</body>
</html>
Sign Up (signup10.html) :
<!DOCTYPE html>
<html>
<head>
<title>CSSwithEME.com</title>
<meta charset="utf-8">
<link rel="stylesheet" href="main10.css">
<link rel="stylesheet" href="proof10.html">
<link rel="stylesheet" href="about10.html">
<link rel="stylesheet" href="signup10.html">
<link rel="stylesheet" href="normalize.css">
<link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet">
</head>
<body class="site">
<div id="wrapper" class="container">
<header>
<H1>Sign Up Sheet</H1>
<nav>
<ul>
<li><a href="index10.html" id="side">Home</a></li>
<li><a href="about10.html" id="side">About</a></li>
<li><a href="proof10.html" id="side">Example</a></li>
<li><a href="signup10.html" class="selected" id="side">Sign Up</a></li>
</ul>
</nav>
</header>
<form class="form">
<label for="name">Name:</label>
<input type="text" id="name" name="username">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="useremail">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="userpassword">
<br>
<button type="submit">Sign Up</button> <button type="reset">Reset</button>
</form>
</div>
<footer class="footer">
<div id="footer">
<p>© 2017 CSS with EME</p>
</div>
</footer>
</body>
</html>
CSS :
/**************************************************
GENERAL
***************************************************/
html{
background-color: #d8d8d8;
}
body,
h1 {
margin: 0;
}
h4 {
font-family: 'Spirax', cursive;
font-size: 1.5rem;
}
li {
font-size: 1.5rem;
list-style-type: none;
}
* {
box-sizing: border-box;
}
/**************************************************
HEADER & FOOTER
***************************************************/
header{
background-color:#5e5e5e;
color:white;
text-align: center;
font-family: 'Spirax', cursive;
font-size: 1.5rem;
width:100%;
margin:0;
padding:0;
}
footer{
background-color:#5e5e5e;
color:white;
font-size: 1em;
text-align:center;
clear:both;
padding-top: 50px;
}
/**************************************************
PAGE: EXAMPLE
***************************************************/
.container{
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content: space-between;
align-items: center;
}
.item {
font-size: 1.5rem;
text-align: center;
}
.itemt {
font-size:1.99rem;
font-weight:bold;
}
img {
display:block;
margin: auto;
width: 50%;
}
/**************************************************
PAGE: FORM
***************************************************/
form {
width:100%;
padding:2rem;
}
button {
background-color:black;
color:white;
}
/**************************************************
NAV
***************************************************/
nav ul {
list-style:none;
margin:0;
padding: 10px;
}
nav li {
display:inline-block;
}
nav a {
font-weight:800;
padding:15px 10px;
}
nav a, nav a:visited {
color: white;
}
nav a.selected {
color: white;
}
nav a:hover {
color: #808080;
}
/**************************************************
DIV
***************************************************/
div p{
padding-left:15px;
padding-right:15px;
}
/**************************************************
MEDIA
***************************************************/
@media (min-width:600px) {
header,
footer {
color: white;
background-color: #A78772;
font-size:1.5rem;
width:100%;
margin:0;
}
html,
body{
background-color:#785B4D;
color: white;
}
h4 {
font-size: 2rem;
}
p {
font-size: 1.8rem;
}
li {
font-size: 2rem;
}
nav a:visited {
color: white;
}
nav a.selected {
color: #220808;
}
nav a:hover {
color: black;
}
.item {
align-items: center;
font-size: 1.6rem;
text-align: center;
}
.itemt {
font-size:2rem;
font-weight:bold;
}
button {
background-color:white;
color:black;
}
}
@media (min-width:1500px){
html,
body{
background-color: #ffb2ff;
}
header,
footer {
background-color: #660066;
font-size:1.5rem;
}
nav a, nav a:visited {
color: #d3c1c1;
}
nav a.selected {
color: white;
}
nav a:hover {
color: white;
}
h4 {
font-size: 2.8rem;
}
p {
font-size: 2rem;
}
button {
background-color:#660066;
color:white;
}
.container{
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content: space-between;
align-items: left;
}
.item,
.itemt {
margin-left:2em;
}
.item {
font-size: 1.5rem;
text-align: left;
margin-left:4em;
}
.itemt {
font-size:1.99rem;
font-weight:bold;
padding:0.2rem;
}
img {
width: 30%;
float:left;
margin: 0 10px;
}
}
/**************************************************
FLEXBOX
**************************************************/
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
width:100%;
}
.container {
flex: 1;
flex-wrap: wrap;
}
Thats all of it besides two other pages but because theres more content on them it isn't showing. I know the pages are random I'm just trying to see what I've actually picked up and its not going well so far hahahaaaaaa
Nijesh Nj
18,232 PointsNejc Vukovic Oh! I was missing that. Anyway thanks for adding some information to my knowledge.
Benjamin Larson
34,055 PointsBenjamin Larson
34,055 PointsOh, and I'm not sure what's in all of those .css files, but you custom stylesheet should come after the normalize.css
If that fixes the problem I can explain more of what's going on with the flexbox and how to fix the other pages.
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsNejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsNijesh Nj welcome :) That's why normalize is bound to sites :) To normalize some things :D I've done some errors myself so I know that sometimes you learn best from trial and error :D
Emily Easton
13,575 PointsEmily Easton
13,575 PointsIT WORKED!!!!!!!!!!!!!!! Ahhhh I'm so happy!! & yeah at first it was space above the header but that was because I went from the old method to using flex box and I didn't change everything that needed to be changed such as all the id tags ahhh (I'm using the excuse that I'm female and new haha) then it moved haha, just my luck any! but thank you:)