• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS why are the gaps between my elements?

skribble85

New Coder
Code:
<html>
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap"
      rel="stylesheet"
    />
    <style>
      * {
        padding: 0px;
        margin: 0px;
        font-family: "Poppins", sans-serif;
      }

      /* Style The Dropdown Button */
      .dropbtn {
        background-color: #ffffff;
        color: #3d3d3d;
        padding: 14px 50px 28px 60px;
        font-size: 17px;
        border: none;

        font-weight: 600;
        cursor: pointer;
        text-align: justify;
      }
      .nodropbtn {
        background-color: #ffffff;
        color: #3d3d3d;
        padding: 13px 50px 28px 60px;
        font-size: 17px;
        border: none;

        font-weight: 600;
        cursor: pointer;
        text-align: justify;
      }

      /* The container <div> - needed to position the dropdown content */
      .dropdown {
        position: relative;
        display: inline-block;
        background-color: #ffffff;
      }

      /* Dropdown Content (Hidden by Default) */
      .dropdown-content {
        display: none;
        padding: 0px 0px 0px 0px;
        position: absolute;
        background-color: #34cc99;
        min-width: 275px;
        z-index: 1;
        text-align: justify;
      }

      /* Links inside the dropdown */
      .dropdown-content a {
        text-decoration: none;
        color: white;
        padding: 15px 5px;
        display: block;
      }

      /* Change color of dropdown links on hover */
      .dropdown-content a:hover {
        background-color: #019966;
      }

      /* Show the dropdown menu on hover */
      .dropdown:hover .dropdown-content {
        display: block;
        background-color: #34cc99;
      }

      /* Change the background color of the dropdown button when the dropdown content is shown */
      .dropdown:hover .dropbtn {
        background-color: #019966;
      }
      .nodropbtn:hover {
        background-color: #019966;
      }

      body {
        background-color: white;
        max-width: 100%;
        float: right;
        border-bottom: solid 5px #34cc99;
        background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg)
          no-repeat left top;
        background-size: cover;
      }

      h2 {
        float: left;
        background-color: #ffffff;
        padding: 15px 225px 15px 252px;
      }
    </style>
  </head>



Code:
  <body>
    <span>
      <h2>HITHEREPPL</h2>
    

    <div class="dropdown">
      <button class="dropbtn">ABOUT</button>
      <div class="dropdown-content">
        <a href="#">OUR STORY</a>
        <a href="#">OUR COMMITMENT</a>
        <a href="#">Link 3</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn">LOCATIONS</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn">PRODUCTS</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="nodropbtn">BLOG</button>
      <button class="nodropbtn">CONTACT</button>
    </div>
    </span>
  </body>
</html>
 

simong1993

Active Coder
Staff Team
Guardian
Hey,

i guess you mean these:-
1618343599082.png

edit your code from Span To Span with mine

HTML:
      <span>
      <h2>HITHEREPPL</h2>
    
    <div class="dropdown">
      <button class="dropbtn">ABOUT</button>
      <div class="dropdown-content">
        <a href="#">OUR STORY</a>
        <a href="#">OUR COMMITMENT</a>
        <a href="#">Link 3</a>
      </div>
    </div><div class="dropdown">
      <button class="dropbtn">LOCATIONS</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div><div class="dropdown">
      <button class="dropbtn">PRODUCTS</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div><div class="dropdown">
      <button class="nodropbtn">BLOG</button>
      <button class="nodropbtn">CONTACT</button>
    </div>
    </span>

What you had done it put a gap inbetween your divs so HTML had thought you wanted a space, Usualy this is not a issue but your menu needs a bit of work my friend to stop this happening. Have you ever thought of building in bootstrap?
 

Top