dmacfang8 Posted February 13, 2018 Share Posted February 13, 2018 there is a lot of white space in my menu. how do i fix it? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 14, 2018 Share Posted February 14, 2018 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. Link to comment Share on other sites More sharing options...
dmacfang8 Posted February 17, 2018 Author Share Posted February 17, 2018 <!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> Link to comment Share on other sites More sharing options...
dmacfang8 Posted February 17, 2018 Author Share Posted February 17, 2018 .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; } Link to comment Share on other sites More sharing options...
dsonesuk Posted February 17, 2018 Share Posted February 17, 2018 (edited) 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 February 17, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now