i'm making website using bootstrap flatui framework , found weird happening. when use <br> tags after nav bar makes weird white box.
code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>cs:go - premium betting</title> <meta name="description" content="flat ui kit free twitter bootstrap framework design , theme, responsive framework includes psd , html version."/> <meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0"> <!-- loading bootstrap --> <link href="dist/css/vendor/bootstrap.min.css" rel="stylesheet"> <!-- loading flat ui --> <link href="dist/css/flat-ui.min.css" rel="stylesheet"> <link href="docs/assets/css/demo.css" rel="stylesheet"> <link rel="shortcut icon" href="img/favicon.ico"> <!-- html5 shim, ie6-8 support of html5 elements. other js @ end of file. --> <!--[if lt ie 9]> <script src="dist/js/vendor/html5shiv.js"></script> <script src="dist/js/vendor/respond.min.js"></script> <![endif]--> <style> html { background-color: #485b6e; } .logo { width: 300px; } .navbar { height: 90px; } .navbar-nav { margin-top: 35px; } .place { height: 32px; background-color: #ecf0f1; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">toggle navigation</span> <span class="glyphicon glyphicon-tasks"></span> </button> <a class="navbar-brand" href="#"><img class="logo" src="img/home/main_logo_complete.png"></a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right" style="a{text-transform: uppercase;}"> <li><a href="#">how play</a></li> <li><a href="#">support</a></li> <li><a href="#"><img src="img/icons/sits_small.png"></a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </div> </nav> <br><br> <div class="place"></div> <br><br> <div class="container"> <p>hello</p> </div> <script src="dist/js/vendor/jquery.min.js"></script> <script src="dist/js/flat-ui.min.js"></script> <script src="docs/assets/js/application.js"></script> </body> </html> image: 
that's not "weird white box". that's site's body color showing through have content not inside element differently-colored background. can eliminate breaks, put padding in div (to push below navbar) , see same thing.
.place { ... padding-top: 150px; overflow: hidden; } 
Comments
Post a Comment