Position problem with HTML & CSS Project MOVE


#1

In the project they give a page on what the website design should look like. The link is -->https://s3.amazonaws.com/codecademy-content/projects/move/index.html

However when I put my background image into the CSS under the .main class, there's whitespace that I cant get rid off between the image and the top of the page.


I've uploaded the picture for clarity.


#2

Will be something to do with the margin I believe

for that container give it the property margin: 0;


#3

mm no that didn't work, surprising because I was sure that would have worked :confused:


#4

Weird when I go into dev tools that only seems to happen when I add margin to the top,

if you open that site and press f12 and look at the main, compare the code to yours including the box model at the bottom to see if you have any margin and/or padding on the top of it.


#5

Mm used f12 and saw they used background-size: cover. Didn't work for me. Reset the project, added the image url again and used background-size: cover and it worked. Strange but whatever. Thanks for the help :slightly_smiling:


#6

I've been having some of the same issues but with all of the projects. I always compare my coding at the end to see how well I'm doing and I'm finding that I'm using a lot more code than I should have to. Granted I'm not an expert coder by any means but these projects are pretty basic and I find that I'm spending more time than expected hunting through these codes. So should I be working through the project tasks first and THEN working through my CSS styling and formatting? I was trying to write CSS as I went like the task were requesting but it seems like going beyond what is asked might be causing my formatting to get out of line. Is there a proper workflow I should be following?

For this particular project the line that fixes the position of the .main container element and background image is actually the margin property for the .main h1 header. In their source code it is set to the following:

.main h1 {
color: #fff;
margin: 0; <--- This line corrects the positioning problem.
font-size: 150px;
}

I'm open to advice, thanks!

-Eddie


#7

Same problem here, and your fix worked (setting h1 margin:0), which makes absolutely no sense to me. I checked the CSS and box model for both the .main class and the h1 within it and there was no margin defined at either.

Why would it be necessary to specify margin:0 to get rid of that white band, and why in h1? Makes no sense to me.


#8

All browsers have a default style, while not as much as what's happened here, chrome has one of about 8px so a lot of the time you need to specify that it has 0 margin. If there is whitespace at the top of the page it will normally be a margin issue, just remember that and you should be good as you'll realise each time to just set the margin to 0

Just a heads up, for the justeat project 3 stacked menu across the banner, you will need to Google as you won't have been taught it.


#9

Shouldn't the browser's default style also be applied to the sample provided as guidance?

Yet I checked both with the Firefox console and Firebug, and I could see no differences in the CSS or the box model between my code and the one for the sample page.

So not only I'm curious to understand why they are displayed differently, but also about why setting a margin:0 to the h1 element would fix it.


#10

In the example on the .main h1 it already has margin 0 for me on it. A default style somewhere has caused it to cause the gap, but the margin is only on the h1 element. So setting it to 0 just moves it all up.

I'm not sure I can explain much more why this does happen, other than default browser styles, maybe

@stetim94 can explain better. I just know from making smaller websites that default styles for browsers means you have to set a margin most of the time. UNLESS you have a reset sheet which makes everything effectively 0.


#11

Well, actually, there is a underlying reason for this. What you are dealing with here. Lets simplify the example, like i did here as you can see, i made the background of body gray, so you see the headings margin, causes our aqua box/div to shift down, this phenomenon is called Collapsing margins. from w3c:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin

now, div and your heading are both boxes and as you have noticed they formed a single margin, which is rather annoying. You can overcome this problem (as you can read in the w3c link) by adding a padding, which i already added for you in my bin, go ahead, uncomment it, you will the collapsed margin is gone, since now padding (all be it just 0.01px) is now separating the two boxes, preventing collapsed margin.

Someone did a good job of explaining this here in case my explanation is bad


How come the top margin needs to be a negative value?
#12

In the jsbin change the padding-top to 0.10 you've got it as 0.01 :wink:


#13

what is wrong with 0.01px? it is there, and yet small enough not to be noticed


#14

Doesn't work for me if its 0.01, only if its 0.10px (yes I have removed the comment tag things)


#15

maybe 0.1px is better then, just to ensure this problem won't show. Either way, it is about the underlying idea of collapsed margin you need to understand,


#16

Thanks for the explanation @stetim94. I'm curious as to what your thoughts are on workflow? I feel like I'm encountering a lot of these styling issues, and I want to make sure I'm learning how to properly work in the given code, right now I feel like I'm just learning and coding with a lot of work arounds. My code always has more than the reference source file, and it's taking longer than I would expect.

Any tips on workflow, order of operation, software editor or just general tips to cut down on styling and formatting issues? Especially during the initial coding. Also I'm currently using Dreamweaver CC, and SublimeText 2 on top of the online editor for software. I'm thinking about getting the Coffeecup stuff to try out, but right now just trying to find which editor I like best, and which one is most useful.


#17

Just a quick thing from me, sublime text 3 > sublime text 2. Some other I can recommend are Brackets and then theres atom which are all similar to sublime. Depends on your preference. I would probably move away from dreamweaver. Coffeecup doesnt appeal to me because I don't like the look. But its all personal preference.

https://brackets.io
https://atom.io


#18

Follow more tutorials, MDN and w3c have both very good tutorials and documentation to increase your understanding of html and css. Learn to use the inspector to find any issues which might arise in your code.

Think about design first, start with the layout (header, main, footer) so you get this right, otherwise you will run into issues.

Which editor you want to use is your choice, there are so many. Learn other languages as well, to improve your general coding skill and build your portfolio.


#19

+1

Think of it like Lego blocks, you make one but then you need to style it how you want it to be, then you build another piece and style that, and repeat till you have all that you want.


#20

Awesome, thanks for the tips guys! Any reason you would move away from dreamweaver? I was mostly just using it so I had a live preview window as I coded, I could care less about the other stuff. I'll check out those other editors you recommended. Thanks again!