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
hossein tootoonchy
2,675 PointsI use the same code for removing the white space on top of the website, but no matter what the space still exists.
header { float:left; margin: 0 0 30px 0; padding: 5px 0 0 0; width:100%; }
7 Answers
Ryan Field
Courses Plus Student 21,242 PointsOkay! I've tracked down the problem(s)!
First, you have quite a few lines that are commented out incorrectly. You need to use asterisks with your forward slashes, like this:
/*** Commented out text ***/
The number of asterisks doesn't matter, but you have to have at least one after the first forward slash and one before the last forward slash.
Secondly, you had quite a few declarations where you had equal signs.
margin:= 0;
margin=0;
Neither of those will work; you must use this format:
margin: 0;
Next (and this was the cause of your white space), several of your selectors were missing. If you are trying to select an ID element, you must have a hash sign before the element. In your case in particular, it seems the #gallery selector was the culprit. If you simply declare
gallery ul li {
margin: 0;
}
the browser will look for
<gallery>
in your html instead of another element with the ID of "gallery" ID such as:
<div id="gallery"></div>
Your #wrapper element near the top was also missing a hash sign.
In any case, here is the CSS that will fix your issue. It's all your CSS, but I've reformatted it to make it easier to read and added the above corrections. :)
/************************************ 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%;
}
/************************************ HEADING *************************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 0 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;
}
/************************************ 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; }
/************************************ 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;
}
/************************************ 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; }
/************************************ COLORS *************************************/
/** Site Body **/ body { background-color:#fff; color:#999; }
/** Green Header **/ header { background:#6ab47b; border-color:#599a68; }
/** This is going to be nav background on the mobile devices **/ nav { background:#599a68; }
h1, h2 { color:#fff; }
a { color: #6ab47b; }
/** This is the color for nav links **/
nav a, nav a:visited { color:#fff; }
/** Selected nav color **/
nav a.selected, nav a:hover { color: #32673f; }
Have fun coding!
Ryan Field
Courses Plus Student 21,242 PointsYour declaration of
padding: 5px 0 0 0;
means that you want 5px of padding on top, 0px on the right, 0px on the bottom, and 0px on the left (i.e. it starts on the top and goes clockwise around your element), so that may be why you are having white space at the top. That's the only thing I can think of without seeing the rest of your HTML and CSS.
hossein tootoonchy
2,675 PointsRyan
Thank you so much for your answer, I just got it !
hossein tootoonchy
2,675 PointsRyan
Thanks for your email. I changed it to
padding: 0 0 0 0;
and still I have the white bar. I logged out and login into another browser but still I have the same problem.
Ryan Field
Courses Plus Student 21,242 PointsThat's odd. Could you post the rest of your code (HTML/CSS)? It'd be a lot easier to track the problem down if we're able to see it! :)
hossein tootoonchy
2,675 PointsHi Ryan
This is the code I am using but I get a white bar on top of the site.
/************************************ 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%; }
/************************************ HEADING *************************************/
header {
float: left; margin: 0 0 30px 0; padding: 0 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; }
/************************************ 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; }
/************************************ 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; }
/************************************ 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; }
/************************************ COLORS *************************************/
/Site Body/ body { background-color:#fff; color:#999; }
/Green Header/ header { background:#6ab47b; border-color:#599a68; }
/This is going to be nav background on the mobile devices/ nav { background:#599a68; }
h1, h2 { color:#fff; }
a { color: #6ab47b; }
/This is the color for nav links/
nav a, nav a:visited { color:#fff; }
/Selected nav color/ nav a.selected, nav a:hover { color: #32673f; }
hossein tootoonchy
2,675 PointsRyan
Thank you very much for your help. You answered my question completely.
hossein tootoonchy
2,675 PointsRyan
Thank you for your Reply. I am not sure if my question was clear or not but I want to know the name of the software or code editor you used, in the reply. The background, and syntax colors of the code editor you used is in different color and easier to read and more beautiful. I tried to adjust the code editor that comes with the forum but I can't find where to change it. I though it was sublime text software. Could you please let me know how you configure your code editor environment to these settings ? Thank you very much and I apologize for asking all these questions.
Best
Ryan Field
Courses Plus Student 21,242 PointsI just meant that if you use the method that I explained above, your code will appear in that editor, and it will automatically add the colors and highlights. Just be sure to use three ticks (```) before and after any code you paste in here.
hossein tootoonchy
2,675 Pointshossein tootoonchy
2,675 PointsRyan,
Could you let me know what code editor did you use above ?
Best
Ryan Field
Courses Plus Student 21,242 PointsRyan Field
Courses Plus Student 21,242 PointsIt's actually just the code editor supplied by this forum. If you start a new line with three ticks and then the code type, it will display that in the code editor type format. Then just put another three ticks below your code to finish.
```css
(your code goes here)
```
will produce:
(your code goes here)Hope that helps!