Why does body keep overlapping my nav area?

HTML & CSS
1

Hi guys I need some help, the body for my html document keeps overlapping my Header area.

This is how it looks normal.

1920Ă—1080 28.7 KB

1 Like
2

This is how it looks like when it overlaps the header.

628Ă—791 27.1 KB

3

This is my html code, sorry if its badly structured, I am still learning :persevere:

583Ă—830 12.8 KB

4

This is my CSS.

1152Ă—864 18.3 KB

5

1152Ă—742 16.7 KB

6

Hi, DavidB01,

The screenshots of your viewports are helpful, but the screenshots of your code are useless. It would be much better if you would post your code in a message by preceeding the code with three backticks on a line by themselves and ending by placing another three backticks on a line by themselves after your code. Like this…

```
your code here
```

Then we can copy your code to a file(s) and work with it.

You can also drag and drop your code files into a message and they will appear as attachments.

If you have not done so already, please read our posting basics guide for new members.

Forum Posting Basics

3 Likes
7

Hi, DavidB01,

It was quiet night around the firehouse, so I typed everything from your screenshots into a working page. The desktop view looks similar to yours. The smaller width does not, however. There is nothing in your code that would result in the view that you show. I can only imagine that there must be some code missing from somewhere.

It looks like we still need to see a working version of your HTML and CSS that existed when the smaller screenshot was taken.

EDIT:

Actually, it would be good if you included a drawing showing what you are trying to achieve… what the page should look like… too.

2 Likes
8

I can see that there is a horizontal scrollbar and you have scrolled to the right to see the nav. This would indicate that your nav is wider than 100% at that screen width but your other elements are still 100%.

100% = the width of the viewport so when you scroll to see elements outside the viewport they are greater than 100% and so the background of your 100% elements will not be seen because that are only the original viewport width (100%).

It looks as though you have fixed width nav (or a nav that eventually stops compressing as I couldn’t be bothered to look at a screenshot of the code :)) which effectively means that any wrappers to the nav must have a min-width equal to the largest fixed width element contained within (your nav).

This is the same for all pages where you have a elements that don’t compress with the viewport width and when you scroll horizontally the backgrounds of parent elements will not extend unless you have set a min-width on the wrappers equal to the largest fixed width element on the page.

1 Like
9

Sorry, I didn’t think to attach my file.

DavidB01.html (3.7 KB)

EDIT: there is a typo on line 41, “medium” is misspelled “midium” (my typo)

10

The header container at width:100% will be too small for the nav container which has a min-width of 966px. When the screen is less thatn 966px the background on the header container will not encompass the nav when you scroll to the right. As mentioned above you would need a min-width on the header-container.

header_container {
    width: 100%;
    background-color: #fcc;
    min-width: 966px;
}

Also lose the height on the header-container as it does nothing because a percentage height can only be based on a parent that has a height set and is not auto or content high,

11

I figured it out guys thanks for the help :smile:

12

You’re welcome, of course .

Please tell us what you found. We who worked on your issue, as well as others, might benefit from your findings.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.