css - Mysterious whitespace in between Bootstrap2 Navbar and row underneath -
i using bootstrap's navbar , bootsrap's grid display navbar image underneath navbar. however, reason there whitespace between navbar , image. when use firebug investigate location of whitespace, looks navbar top-aligned within containing . have tried fix using css bottom-align navbar, no avail.
how can eliminate whitespace?
thanks!
<!-- top navigation bar --> <div class="row" id="rowtoplinknavbar"> <div class="span6 offset3" id="divtoplinknavbar"> <div class="navbar" id="toplinknavbar"> <div class="navbar-inner" style="font-size: 16px;"> <ul class="nav"> <li class="active"><a href="#">home</a></li> <li class="divider"><a href="#">projects</a></li> <li class="divider"><a href="#">about us</a></li> <li class="divider"><a href="#">the team</a></li> <li class="divider"><a href="#">events</a></li> <li class="divider"><a href="#">meetings</a></li> <li><a href="#">resources</a></li> </ul> </div> </div> </div> </div> <!--background image--> <div class="row" id="rowbackgroundimg"> <div class="span6 offset3" id="backgroundimg"> <!-- background image set in css --> </div> </div> here desperate attempt @ fixing issue using css:
#backgroundimg { color: #ff0000; background-color: #000000; /*width: 709px; height: 553px;*/ background: url('../images/someimage.jpg') no-repeat; background-size: 100%; height: 700px; border-radius: 0px; background-position: center; vertical-align: top; background-position: top; } #divtoplinknavbar { vertical-align: bottom; } #toplinknavbar { padding-bottom: 0px; } #rowbackgroundimg { padding-top: 0px; } .navbar { vertical-align: bottom; }
you may want override margin-bottom: 20px navbar :
.navbar { margin-bottom: 0; } something : http://jsfiddle.net/q4m2g/ (the !important here override style of cdn version of bootstrap i'm using in jsfiddle should not need use if style correctly overrides bootstrap styles)
Comments
Post a Comment