Single tab in navigation bar displaying lower than other tabs-CodePudding

I am working on a draft for a portfolio website. Still a beginner and this site will probably end up changing quite a bit as I progress. I noticed that I can't seem to get my nav bar to align properly, the "portfolio" tab rests below the other tabs and nothin in my CSS should account for this, am I missing something? Here's the link to live site: http://artuciidesigns.epizy.com/index.html?i=3 Here is my code:

/* CSS Document */
body {background-color: whitesmoke;}





/* Header */
.header {
    width: 100%;
    height: 50px;
    display: block;
    background-color: #61d1e2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    background-color: #61d1e2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
    height: 100%;
    display: table;
    float: left;
    border: none;
}
.logo {
    
    max-height: 50px;
    display: table-cell;
    vertical-align: middle;
}
/* Navigation */

body {
  margin: 0;
  
}

.topnav {
  overflow: hidden;
  background-color: #61d1e2; /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.topnav a {
  float: left;
  display: block;
  color: #067393;
  font-family: Kapelka New;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  
  color: #bc0456;
}

.topnav a.active {
  background-color: #bc0456;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
    
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: #067393;
  padding: 14px 16px;
  background-color: inherit;
  font-family: Kapelka New;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightblue;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #067393;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<!DOCTYPE html>
<html>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<style>
body {
  margin: 0;
  
}

.topnav {
  overflow: hidden;
  background-color: #61d1e2; /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.topnav a {
  float: left;
  display: block;
  color: #067393;
  font-family: Kapelka New;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #;
  color: #bc0456;
}

.topnav a.active {
  background-color: #bc0456;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
    
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: #067393;
  padding: 14px 16px;
  background-color: inherit;
  font-family: Kapelka New;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightblue;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #067393;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<div  id="myTopnav">
  <a href="index.html" >Home</a>
  <div >
    <button ><a href="portfolio2.html">Portfolio</a>
    </button>
    <div >
      <a href="FINAL_LOGO_PORTFOLIO copy.pdf">Logo Portfolio</a>
      <a href="Menu Designs.pdf">Menu Designs</a>
      <a href="mag1.pdf">Magazine Design 1</a>
      <a href= "mag2.pdf">Magazine Design 2</a>
    
    </div>
    </div> 
  <a href="about_Me2.html">About ME</a>
  <a href="contact2.html">Contact</a>
  <a href="javascript:void(0);"  onclick="myFunction()">
    <i ></i>
  </a>
</div>

CodePudding user response：

You used a button element for the 'Portfolio' tab. HTML's button element has default preset styles that need to be changed.

button {
    padding: 0 !important;
}

Add this to your stylesheet and take a look!

CodePudding user response：

Both your button and the a tag within it have padding, which is causing the effect you're seeing. In addition to this, there is whitespace between the .dropbtn and the following .dropdown-content which causes and extra 5 pixels to be added to the container's height. You can eiher remove this whitespace by putting the closing button tag and opening div tag on the same line, or set the .dropdown classes font size to 0. Here is a corrected version of your code.

<!DOCTYPE html>
<html>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<style>
body {
  margin: 0;
  
}

.topnav {
  overflow: hidden;
  background-color: #61d1e2; /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.topnav a {
  float: left;
  display: block;
  color: #067393;
  font-family: Kapelka New;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #;
  color: #bc0456;
}

.topnav a.active {
  background-color: #bc0456;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
    
.dropdown {
  float: left;
  overflow: hidden;
  font-size: 0px; /* Prevent whitespace within the div from rendering */
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: #067393;
  padding: 0;
  background-color: inherit;
  font-family: Kapelka New;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightblue;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #067393;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
    <body>

        <div  id="myTopnav">
            <a href="index.html" >Home</a>
        <div >
            <button ><a href="portfolio2.html">Portfolio</a>
            </button>
            <div >
                <a href="FINAL_LOGO_PORTFOLIO copy.pdf">Logo Portfolio</a>
                <a href="Menu Designs.pdf">Menu Designs</a>
                <a href="mag1.pdf">Magazine Design 1</a>
                <a href="mag2.pdf">Magazine Design 2</a>
            </div>
        </div> 
        <a href="about_Me2.html">About ME</a>
        <a href="contact2.html">Contact</a>
        <a href="javascript:void(0);"  onclick="myFunction()">
            <i ></i>
        </a>
        </div>
    </body>
</html>

CodePudding user response：

That's because you're nesting <a> inside <button>, and both have their own padding, so you end up having extra space in that button element. Removing padding from dropbtn should work.

/* CSS Document */
body {background-color: whitesmoke;}





/* Header */
.header {
    width: 100%;
    height: 50px;
    display: block;
    background-color: #61d1e2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    background-color: #61d1e2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
    height: 100%;
    display: table;
    float: left;
    border: none;
}
.logo {
    
    max-height: 50px;
    display: table-cell;
    vertical-align: middle;
}
/* Navigation */

body {
  margin: 0;
  
}

.topnav {
  overflow: hidden;
  background-color: #61d1e2; /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.topnav a {
  float: left;
  display: block;
  color: #067393;
  font-family: Kapelka New;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  
  color: #bc0456;
}

.topnav a.active {
  background-color: #bc0456;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
    
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: #067393;
  background-color: inherit;
  font-family: Kapelka New;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightblue;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #067393;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<!DOCTYPE html>
<html>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<style>
body {
  margin: 0;
  
}

.topnav {
  overflow: hidden;
  background-color: #61d1e2; /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.topnav a {
  float: left;
  display: block;
  color: #067393;
  font-family: Kapelka New;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #;
  color: #bc0456;
}

.topnav a.active {
  background-color: #bc0456;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
    
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: #067393;
  background-color: inherit;
  font-family: Kapelka New;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightblue;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #067393;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<div  id="myTopnav">
  <a href="index.html" >Home</a>
  <div >
    <button ><a href="portfolio2.html">Portfolio</a>
    </button>
    <div >
      <a href="FINAL_LOGO_PORTFOLIO copy.pdf">Logo Portfolio</a>
      <a href="Menu Designs.pdf">Menu Designs</a>
      <a href="mag1.pdf">Magazine Design 1</a>
      <a href= "mag2.pdf">Magazine Design 2</a>
    
    </div>
    </div> 
  <a href="about_Me2.html">About ME</a>
  <a href="contact2.html">Contact</a>
  <a href="javascript:void(0);"  onclick="myFunction()">
    <i ></i>
  </a>
</div>