CODEWITHSUNDEEP
htmlcsswebstyling
arrchar
arrchar

Reputation: 123

Styling With CSS - Float Removing Styling

I'm new to web development and have discovered an issue that I cant find an answer for. I'm attempting to create a navigation bar following the following guide:

--> https://medium.freecodecamp.org/how-to-easily-build-mashables-navigation-bar-with-html-and-css-9e5007af786

My question is more for learning purposes as it just doesn't make much sense to me and I'm hoping someone can shed some light on it.

When using CSS to style the guide reference turning each element into blocks using the display:block property and then floating them next to eachother. Much like the following:

   nav {
      width: 100%;
      background-color: #0b98de;
    }
      nav a {
        
        display: block;
        text-align:center;
        
        font-family: sans-serif;
        font-size: 9px;
        color: white;
    
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        
        text-decoration: none;   
     }
      nav a:hover {
        
        background-color: #17b0cf;
        
      }
<h1>HTML</h1>
  
 

    <div id="navigation-bar">
      <header id="header">
        <nav id="nav-bar">
          <a href="#">Tab1</a>
          <a href="#">Tab2</a>
          <a href="#">Tab3</a>
          <a href="#">Tab4</a>
          <a href="#">Tab5</a>
          <a href="#">Tab6</a>
          <a href="#">Tab7</a>
          <a href="#">Tab8</a>
        </nav>
      </header>
     </div>

But what this appears to be doing is ignoring the properties in the nav block and only applying the properties in the nav a block. For this examples purpose it will leave nav bar white showing only the black border specified in the nav a block. It ignores the background color specified in the nav block and doesnt extend to width:100%. I've tried using the ID identifier as well as a class.

I have found a way to mitigate this by using display:inline-block as below but I still dont understand what the "hidden chain of command" is.

CSS

nav {
  width: 100%;
  background-color: #0b98de;
}
  nav a {

    display: inline-block;
    float:left;
    border: 1px solid #000;

    font-family: sans-serif;
    font-size: 9px;
    color: white;

    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;

    text-decoration: none;   
 }
  nav a:hover {

    background-color: #17b0cf;

  }

Upvotes: 0

Views: 296

Answers (4)

john c. j.
john c. j.

Reputation: 1185

Short answer: because the height of nav is 0.

It have 0 height because it's content is floated. Floated elements are ignored on calculating the height of their parent.

The good way to fix it is to add display: flex; to the nav. In this case, nested elements will be automatically treaded as flexed instead of floated.

Another option is to add float: left; to the nav.

Flex is better because it is modern, very powerful and flexible technology. Floats are something from stone age.

Upvotes: 1

Akrion
Akrion

Reputation: 18525

What you have boils down to the difference between a block element div and an inline element a, span etc etc. You actually do not need the float nor the display-inline since the a is a in-line element.

Once you added display: block you made all your inline elements (the anchors) to behave like divs ... due to that then there was float: left which made them look line inline elements one on the left side of the other but messed up the actual nav. You created your own problem basically.

I changed/cleaned slightly the CSS:

nav {
  background-color: #0b98de;
  padding: 10px 0px 10px 0px;
}

nav a {
  font-family: sans-serif;
  font-size: 9px;
  color: white;
  padding: 15px 10px 10px 10px;
  text-decoration: none;
}

nav a:hover {
  background-color: #17b0cf;
}
<div id="navigation-bar">
  <header id="header">
    <nav id="nav-bar">
      <a href="#">Tab1</a>
      <a href="#">Tab2</a>
      <a href="#">Tab3</a>
      <a href="#">Tab4</a>
      <a href="#">Tab5</a>
      <a href="#">Tab6</a>
      <a href="#">Tab7</a>
      <a href="#">Tab8</a>
    </nav>
  </header>
</div>

Upvotes: 0

This Guy
This Guy

Reputation: 1736

Your nav is collapsing on you since no height nor float is specified. Simply add this to your nav:

nav {
  width: 100%;
  background-color: #0b98de;

  float: left; /* Either specify a height here or float - otherwise, this nav collapses on you */
}
  nav a {

    display: block;
    float:left;
    border: 1px solid #000;

    font-family: sans-serif;
    font-size: 9px;
    color: white;

    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;

    text-decoration: none;   
 }
  nav a:hover {

    background-color: #17b0cf;

  }

Using this, you do not need to worry about the clear class as mentioned in other answers - write less, do more ( I know this is jquery's slogan, but this also applies here :) )

Then your HTML will look like this:

<nav>
      <a href="#">Tab1</a>
      <a href="#">Tab2</a>
      <a href="#">Tab3</a>
      <a href="#">Tab4</a>
      <a href="#">Tab5</a>
      <a href="#">Tab6</a>
      <a href="#">Tab7</a>
      <a href="#">Tab8</a>
    </nav>

No ID is needed on nav and since you did not have any CSS applied for navigation-bar and the header, I went ahead and took that off your HTML but if you actually do have these ID's in your css, simply re-add them...which would look like this for your HTML then:

<div id="navigation-bar">
  <header id="header">
    <nav>
      <a href="#">Tab1</a>
      <a href="#">Tab2</a>
      <a href="#">Tab3</a>
      <a href="#">Tab4</a>
      <a href="#">Tab5</a>
      <a href="#">Tab6</a>
      <a href="#">Tab7</a>
      <a href="#">Tab8</a>
    </nav>
  </header>
 </div>

Upvotes: 0

ConsoleLog
ConsoleLog

Reputation: 511

I think what's happening is since your anchor elements have been floated, you need to clear the floating on the parent element, which in your case is nav. I have recreated your navigation simply by adding a clearfix class.

https://codepen.io/anon/pen/xJPmyL

<div id="navigation-bar">
  <header id="header">
    <nav id="nav-bar" class="clearfix">
      <a href="#">Tab1</a>
      <a href="#">Tab2</a>
      <a href="#">Tab3</a>
      <a href="#">Tab4</a>
      <a href="#">Tab5</a>
      <a href="#">Tab6</a>
      <a href="#">Tab7</a>
      <a href="#">Tab8</a>
    </nav>
  </header>
 </div>
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

Clearfix explanation - https://www.w3schools.com/howto/howto_css_clearfix.asp

Hope this helps.

Upvotes: 1

Related Questions