Jump to content
dmacfang8

Menu Whitespace

Recommended Posts

That's easy, just change the css, or html code that give you that large white-space. Since you haven't provided any such coding, that's the best only solution to your problem we can provide.

Share this post


Link to post
Share on other sites

<!DOCTYPE hml>

<html>
    <head>
    <title> Dashie </title>
    <link rel='stylesheet' href='CSS.css'>
    </head>
<body>
    <div class="navbar">
  <a href="#home">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Links
      
    </button>
    <div class="dropdown-content">
        <div class='red'>
        <a href="https://www.youtube.com/user/DashieGames"><img src="yt_logo_rgb_light.png" style='width:10%'/></a>
        </div>
        <div class='lightblue'>
        <a href="https://twitter.com/DashieXP"><img src="7194920_orig.png" style='width:10%'/></a>
        </div>
        <div class='blue'>
        <a href="https://www.facebook.com/brokenxbox/"><img src="yt_logo_rgb_light.png" style='width:100px'/></a>
        </div>
    </div>
  </div>
</div>

    </div>
</body>

</html>

Share this post


Link to post
Share on other sites

.navbar {
    overflow: hidden;
    background-color: #FD7012;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

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

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: black;
}

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

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

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

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

.red a:hover {
        background-color: red;
}

.lightblue a:hover {
        background-color: #1da1f2;
}

.blue a:hover {
        background-color: #365899;
}

Share this post


Link to post
Share on other sites

Apart from a unnecessary extra closing div i cannot see anything wrong that would produce that? unless the min-width: was 610px instead of 160px;

see

https://www.w3schools.com/code/tryit.asp?filename=FOK88K6X2LA4

 

PS: it would be better running this from local server rather than O/S file directory.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...