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 PointsWhite space above the header :(
HELPPPPPP!
No matter what I do I still get a white space above the header on my page, I've even applied
.wapper {
clear:both;
}
and it still hasn't work. I have also tried my class wrapper as an id just incase it didn't like it being a class but it also didn't work.
The webpage has 5 different linked style sheets including normalise.css, main.css and index.html (so there is three html documents) and I used media attributes so there is three different sizes.... all of the pages AND sizes have the white space above the header.
I hate to just put in the whole css page but I literally have no idea whats going on with it including doing research on sites such as w3schools and just can't seem to find myself an answer/explanation as to why its happening and how to fix it. Also am I laying everything out right? This is the first time I've made a page from scratch by myself.
CSS:
/**************************************************
GENERAL
***************************************************/
html{
background-color: #d8d8d8;
}
h4 {
font-family: 'Spirax', cursive;
font-size: 1.5rem;
}
li {
font-size: 1rem;
list-style-type: none;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#wrapper {
clear:both;
}
#wrapper {
min-height: calc(100vh - 89px);
}
h1{
margin-top:0;
}
/**************************************************
HEADER & FOOTER
***************************************************/
header{
background-color:#5e5e5e;
color:white;
text-align: center;
font-family: 'Spirax', cursive;
}
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;
font-size: 1.6rem;
justify-content: space-around;
align-items: center;
height:100%;
align-items: stretch;
}
/**************************************************
NAV
***************************************************/
nav ul {
list-style:none;
margin:0 10px;
padding:10px 0;
}
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:2rem;
}
html,
body{
background-color:#785B4D;
color: white;
}
h4 {
font-size: 1.5rem;
}
li {
font-size: 2rem;
}
nav a:visited {
color: white;
}
nav a.selected {
color: #220808;
}
nav a:hover {
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;
}
}
/**************************************************
FLEXBOX
**************************************************/
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
width:100%;
}
.container {
flex: 1;
}
Benjamin Larson
34,055 PointsCan you also include your HTML code? Sometimes it's hard to find a problem without seeing both, and it can aid in using developer tools to zero in on problem areas.
Emily Easton
13,575 Points <body class="site">
<div id="wrapper">
<header>
<h1>CSS Layout Basics</h1>
<nav>
<ul>
<li><a href="index10.html" class="selected" 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>
</ul>
</nav>
</header>
<section id="words">
</section>
</div>
<footer class="footer">
<div id="footer">
</div>
</footer>
</body>
Emily Easton
13,575 PointsI did use developer tools and it said there was no margin or padding anywhere that would effect it (that I could see anyway).
Anthony McCormick
6,774 PointsCan't see any white space when I pop it into my text editor and load it up in Chrome.
Benjamin Larson
34,055 PointsI don't see any either, except for a tiny amount caused by the line-height, which could be removed by setting the h1 property to line-height: 1;.
Unless you're referring to the white space that's below the h1, would could be removed by changing margin-top: 0 to just margin: 0;.
Emily Easton
13,575 PointsYeah it didn't show up in google chrome then I opened it with fire fox and it showed up again so I went back to google chrome because thats the default for brackets (which is what I'm using) and then it showed up again. It's stopped showing now so maybe it was just something to do with the browser? If it occurs again I'll be sure to try the adjustments you stated! Thank you both!!<3
1 Answer
Emily Easton
13,575 PointsThis 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! Beginner mistakes ayyyyyyy.
Anthony McCormick
6,774 PointsAnthony McCormick
6,774 PointsGot a link to your HTML as well?