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
Justin Hicks
14,290 PointsPractice webpage problems
I'm having a few problems with my practice website.The first thing I'm having problems with is the white space at the very top of the page, I cant seem to get rid of it. Keep in mind I have not yet been able to start on a desktop version of this so its mobile size currently. The other problem is I cant get both the picture columns to even out, like say 4 pictures per column. The link for the page is http://justinhicks.design/sparklelaunch.html for a live view of the page.
/*****HEADER*****/
.top {
float: left;
text-align: center;
background: linear-gradient(#1874CD, white);
margin: 0 0 5px 0;
padding: 5px 0 0 0;
width: 100%;
font-size: 20px;
color: #0E457B;
}
#description {
float: left;
font-size: 20px;
color: slategrey;
}
/*****PICTURE COLUMNS*****/
#areas {
list-style: none;
display: inline-block;
text-align: center;
}
#areas li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#areas li a p {
margin: 0;
padding: 5%;
color: #1874CD;
}
5 Answers
David Tonge
Courses Plus Student 45,640 PointsThere's default styles in browsers which adds margin and padding to certain elements. Right now your body element has a 8px margin all around. Add the following to the top of your stylesheet. you should look into using normalize.css or other css resets.
body{
margin: 0;
}
Nolan Tjaden
2,505 PointsHi Justin!
Have tried adjusting margin-top? You could be experiencing margin collapsing. Try a value of zero or even a negative value -30.
.top { margin-top: 0; }
Let me know what happens:)
Nolan Tjaden
2,505 PointsMy response concerns the extra white space on top fyi** :)
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsHi Justin,
Problem with the extra space at the top can be solved by using a reset such as the eric meyer reset. Either add it in a separate css file and include it above your travel.css in the html, or include it at the very top of the travel.css file. Browsers apply margin and padding (and other styles) by default, by using a reset you can remove these default styles and start with a 'clean-slate'. It is highly recommended you use a reset such as the eric meyer reset or normalize.css on every project.
<link rel="stylesheet" href="./sparklelaunch_files/reset.css">
<link rel="stylesheet" href="./sparklelaunch_files/travel.css">
Second issue seems to be caused by the images being different heights. You can fix this by adding the following to travel.css:
li:nth-child(3){
clear: left;
}
li:nth-child(5){
clear: left;
}
But its not a very clean fix and if you keep adding more images you are probably going to run into the same problem. A better way of doing it would be to make the images have the same height and width. Or perhaps by separating the list of images into 2 columns.
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsThe solution David provided works fine in this case (and with a lot less code) and if you look at the code for normalize.css you can see them doing the same thing. But it can be pretty handy to include normalize.css or the eric meyer reset whenever you start a project even if a lot of the code is unnecessary. You can always remove the parts you aren't using later.
Hope this helps anyway :)
Justin Hicks
14,290 PointsThank you for your suggestion with the li selector fixes the image columns, but there is a small size when you adjust the size of the browser window when the columns revert back to a stagger. Excellent suggestion although not perfect, it is much better then before. I've included a normalize.css and that still has not fixed the white space at the top.
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsHi Justin.
Try using the Eric meyer reset or the fix David provided instead. You should be able to solve the issue with the columns by making all the images the exact same size. You could add a small section that's the same as the background color or transparent to make up the difference in heights. The text on either side should align that way as well so it will look a bit neater.
Hope this helps :)
Justin Hicks
14,290 PointsThanks every one for your help, when I have time to mess with it I'll try some of these suggestions. Again much Thanks :)
Justin Hicks
14,290 PointsWow thanks so much David! I never even thought of the browsers default styles
Justin Hicks
14,290 PointsJustin Hicks
14,290 PointsDoes that also solve the uneven picture columns?