Footer and header problem

HTML-CSS
1

Why won’t my footer stay at the bottom of the page?
and when I make my header {position:fixed};
why can’t I scroll down?

https://codepen.io/wingsolo/pen/YzXOqeQ

2

You’re HTML is all sorts of messed up :slight_smile: You’ve got three header tags in there and one of them encompasses most of the content on the page which is why you can’t scroll. Run your HTML through a validator.

2 Likes
3

Try to obtain a proper structure in your code
Example:

<head>
meta data goes here 
 <head/>

<header> can also be title but this is the place where the main title goes </header>

<body>
Containing h1 div's all the main stuff really. Forms menu bars,
Instead of headers try to do h1, h2, and so on.
</body>

<footer>
any aditional information like contact info etc.
</footer>

Furthermore I would strongly recomend you take a look at structures: https://www.w3schools.com/html/html_layout.asp

1 Like
4

@KittyKora, your “proper structure” is incorrect. The <footer> would be within the <body>

But all of that isn’t required since codepen provides the boilerplate template.

1 Like
5

HTML:

  1. Line 24/25: close the header (</header>).

  2. Line 28: move the opening div tag inside the form.

  3. Line 36: move the closing div tag inside the form.

  4. Line 49: close the video-container opening div tag.

  5. Line 95: move the footer element below the price-boxes closing div tag.

CSS:

Although it makes the test pass. This is an incomplete media query.

@media and (min-width){
  
}

Tests:

  1. Test 5, you do not have any sections with ids that matches the href of the links.

  2. Test 11, you need to remove the button and link and instead create an input element of type submit for the submit. Then move id="submit" from the div to the new input element.

  3. Test 12, the form element needs a action attributes and it has to be set to https://www.freecodecamp.com/email-submit

You still need to work on the CSS after this, happy coding.

2 Likes
6

This is hard for me :frowning: Thank you haha

7

Thank you so much! I will go work on it when I get home :slight_smile:

8

Ah… The footer must not be within the body tag?

9

I am confused now haha does the footer tag belong in the body tag or not? :stuck_out_tongue:

10

Yes, you put the footer tag of your page inside of the body tag but below the main content. In terms of some sample code, here is roughly where your footer tag should be placed.