Nav-bar problem

1

Hello Everyone !

I stuck with my nav-bar in my project. I think I’ve done something wrong with float, I wanna my background nav-bar color black, but from some reason nav-bar isn’t located in container:
I was following that tutorial as well. https://www.youtube.com/watch?v=FEmysQARWFU
Any Camper can help me please !

Wojtek

2

See, I strongly recommend you read the MDN docs about float. Here’s the relevant bit:

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

The part that matters to you is The element is removed from the normal flow of the page – what does that mean? Insofar as the header element is concerned, the nav has been removed from consideration.

To do what you’re trying, perhaps get rid of the float and tell the header to text-align: right. It’s a hacky solution, but it will do what you’re trying to do.

3

hi,

Thanks for your answer, but if you check tutorial, guy was using float anyway and everything is just working perfectly ans smothly :smiley: Therfore I can’t see the problem :frowning:

4

You just need to fix your clearfix (haha get it fix your…never mind). You have a space between the :: and after.

#header:: after {
  display: table;
  clear: both;
  content: "";
}

Should be:

#header::after {
  display: table;
  clear: both;
  content: "";
}

You are missing a colon after padding on the html/body selector.

html,body {
  margin: 0;
  padding 0; /* <- missing colon */
}

Personally, I would say to ditch floats unless you’re intentionally trying to learn them. There are much better layout methods. Floats are fine for what they were meant for, like floating text around an image, but for layout, they just aren’t that great compared to newer solutions.

1 Like
5

Dang it. After digging and digging, wandering through the DOM inspector, I came to that same place… just a few seconds late. Sigh.

Good find, @lasjorg. :wink:

1 Like
6

That sounds just like what I always do. I always just jump right into the DOM inspector. Most times it’s not a bad idea but I have come to learn that I need to look at the source code a lot more than I really want to. In this case, I just thought that there should be a clearfix, looked for it in the source and saw the error.

1 Like