CODEWITHSUNDEEP
htmlcssnavigation
Daniel Hall
Daniel Hall

Reputation: 37

Bottom Nav Bar Whitespace

I'm currently trying to learn HTML5 with Javascript and CSS integrated to make a web-based game in a canvas and I'm currently working on the bottom nav bar before I do anything to the game itself I want to work on all the linkable objects such as the navbar and tabs.

Anywho while trying to make a navbar I came across an issue which is causing my navbar and the border underneath it to have whitespace in between the two of them making it look quite shoddy I personally think, I have supplied my current code below:

.container h1 {
  margin-top: 0;
  padding-top: 1em;
}

.topnav {
  background-color: black;
  overflow: none;
}

.topnav a {
  float: center;
  position: relative;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 20px solid transparent;
}

.topnav a:hover {
  border-bottom: 5px solid red;
}

.topnav a:active {
  border-bottom: 8px solid red;
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text-html" charset="utf-8">
  <title>Power Trip - The game about producing power over time</title>
</head>

<!-- Main Game Canvas Codeblock -->

<body>
  <canvas width="1280" height="720" id="GameCanvas" style="">
                
            </canvas>
</body>

<!-- End of Main Game Canvas Codeblock -->
<!-- Bottom Nav Codeblock -->

<footer>
  <center>
    <div class="topnav">
      <div><a href="">Website</a> | <a href="">Facebook</a> | <a href="">Twitter</a> | <a href="">Contact Us</a></div>
    </div>
  </center>
</footer>

<!-- End of Bottom Nav Codeblock -->

</html>

Also trying to increase the black space of the bottom navbar so there is a larger surface area for the navbar but not quite sure how:

I would choose either this type of navbar or possibly the full footer being split into 4 sections (1 for each nav) running side by side.

Thanks for any help you can provide.

Upvotes: 2

Views: 100

Answers (1)

soulshined
soulshined

Reputation: 10602

The problem isn't really a problem :) The rules are applied as specified, in this case you are adding too much padding to the tags. See below where I commented out your rule

Note, I removed some things just so it's more readable

.container h1 {
  margin-top: 0;
  padding-top: 1em;
}

.topnav {
  background-color: black;
  overflow: none;
  text-align: center;
}

.topnav a {
  float: center;
  position: relative;
  color: #f2f2f2;
  text-align: center;
  /* padding: 14px 16px; */ 
  padding: 5px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 20px solid transparent;
}

.topnav a:hover {
  border-bottom: 5px solid red;
}

.topnav a:active {
  border-bottom: 8px solid red;
}
<body>
  <!-- End of Main Game Canvas Codeblock -->
  <!-- Bottom Nav Codeblock -->

  <footer>
      <div class="topnav">
        <div>
          <a href="">Website</a>
          <a href="">Facebook</a>
          <a href="">Twitter</a>
          <a href="">Contact Us</a>
        </div>
      </div>
  </footer>
</body>

Upvotes: 1

Related Questions