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
Fedor Andreev
6,438 PointsHow to remove the white space?
I managed to remove the white space around my header. So, my header is perfectly aligned to the top left corner and there is no white space between the header element and the end of the page. I am talking about the negative space.
However, when I added the fixed position to my header, it follows when I scroll down, which is what I want. But when I added a fixed position, the white space is back.
I want to keep the fixed position on my header but remove the white space. Is there anyway to do this? The fixed position can be found under, 'Main Header'.
```<!doctype html> <head> <meta charset="utf-8"> <title>Red</title> <link rel="stylesheet" href="CSS/Main.css"> </head> <header> <div class="Header"> <div class="Red"> <a href="Index.html" id="Red">Red</a> </div> <div class="Blue"> <a href="Blue.html" id="Blue">Blue</a> </div> <div class="Green"> <a href="Green.html" id="Green">Green</a> </div> </div> </header> <body> <ul> <li><img src="img/Red.jpg" alt="Red" id="RedPicture"> <p>The Color Red </p> </li> <li><img src="img/RedArt.jpg" alt="RedArt" class="RedArtPicture"></li> <li><img src="img/Food.jpg" alt="Food" class="FoodPicture"></li> <li><img src="img/Lobster.jpg" alt="Lobster" class="LobsterPicture"></li> </ul> </body>
</html>
/******************
REMOVED WHITE SPACE
******************/
html, body {
padding:0;
margin:0;
}
/******************
MAIN HEADER
******************/
.Header {
background-color: black;
height: 100px;
width: 1000px;
opacity: 0.9;
position:fixed;
}
a {
font-size:50px;
text-decoration: none;
color:black;
}
/******************
RED HEADER
******************/
.Red {
background-color:red;
height:80px;
width:300px;
margin:1%;
margin-left:3%;
border-radius:20px;
position:absolute;
}
#Red {
display: block;
text-align: center;
line-height: 80px;
}
/******************
BLUE HEADER
******************/
.Blue {
background-color:blue;
height:80px;
width:300px;
margin-top:1%;
margin-left:34%;
border-radius:20px;
position:absolute;
}
#Blue {
display: block;
text-align: center;
line-height: 80px;
}
/******************
GREEN HEADER
******************/
.Green {
background-color:green;
height:80px;
width:300px;
margin-top:1%;
margin-left:65%;
border-radius:20px;
position:absolute;
}
#Green {
display: block;
text-align: center;
line-height: 80px;
}
/******************
RIGHT-SIDE IMAGES
******************/
img {
height:250px;
width:300px;
}
ul {
text-align: right;
list-style-type: none;
position:relative;
}
/******************
TEXT UNDER IMAGES
******************/
p {
font-size: 25px;
}
2 Answers
Fedor Andreev
6,438 PointsI can fix this problem by giving the HTML and body in CSS a margin-top:-8px; . But I don't like this solution, I prefer solutions that are more "SOLID". Or is this way acceptable?
Ricardo Hill-Henry
38,442 PointsIf you're using a position: fixed you can use the offset properties top, bottom, left, and right. In this case top: 0 will put it at the top of the page.You can use these with anything except static I believe.