css - White bar between my nav bar and main text? -
after looking on stackoverflow long not find answer question, that's why asking instead!
there's strange white part between navigation bar , main container, tested typing under bar
this code:
body, html { width: 100%; height: 100%; overflow: hidden; } body { background-color: gray; } #wrapper { margin: 32px 160px 0 160px; background-color: white; height: 90%; } #nav { background-color: #48d1cc; margin: 0; padding: 0; } #nav ul li { margin: -7px 4px 1px 0; background-color: #48d1cc; width: 19.5%; height: 42px; display: inline-block; text-decoration: none; text-align: center; color: black; } #nav { line-height: 42px; font-family: arial, serif; font-size: 20px; } #nav ul li:hover { background-color: #40e0d0; } #right { margin: 0; width: 15%; height: 10px; color: black; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="description" content="a test homepage"/> <meta name="keyword" content="this few test key words"/> <meta name="robots" content="index,follow"/> <link rel="stylesheet" href="style.css"/> <link rel="icon" href="favicon.ico"/> </head> <body> <div id="wrapper"> <div id="nav"> <ul> <a href="index.html"><li>home</li></a> <a href="index.html"><li>help</li></a> <a href="index.html"><li>contact</li></a> <a href="index.html"><li>forum</li></a> <a href="index.html"><li>info</li></a> </ul> </div> <noscript>please enable javascript, have disabled</noscript> </div> </body> </html>
i not sure why happens, great have.
your ul has 16px
bottom margin
#nav ul { margin-bottom: 16px; }
note next time face similar problem try using chrome dev tools (prssing f12) or firebug analyze elements unexpected behaviour
Comments
Post a Comment