i'm trying footer bottom of page.
when create fiddle works; https://jsfiddle.net/3dd73cuk/
on page it´s "flying"; http://bjornc.se/sites/torhultsbrunn/
guess bootstrap has default behavior messes up?!
code
<style> .footer{ background-image: url("img/grasstop.png"); background-size: 100%; position: fixed; bottom: 0; width: 100%; height: 150px; } </style> </head> <body> <!-- navigation --> <nav class="navbar navbar-fixed-top" role="navigation"> <div class="container"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">torhults brunn.se</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"> <li> <a href="#">om oss</a> </li> <li> <a href="#">våra tjänster</a> </li> <li> <a href="#">kontakt</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- page content --> <div class="container"> <div class="row"> <div class="col-md-3"> <p class="lead">trädgårdsmöbler</p> <div class="list-group"> <a href="#" class="list-group-item">trämöbler</a> <a href="#" class="list-group-item">metallmöbler</a> <a href="#" class="list-group-item">konstrottingmöbler</a> <a href="#" class="list-group-item">parasoll & Övrigt</a> <a href="#" class="list-group-item">dynor</a> </div> </div> <div class="col-md-9"> <div class="row carousel-holder"> <div class="col-md-12"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> <li data-target="#carousel-example-generic" data-slide-to="4"></li> <li data-target="#carousel-example-generic" data-slide-to="5"></li> <li data-target="#carousel-example-generic" data-slide-to="6"></li> <li data-target="#carousel-example-generic" data-slide-to="7"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img class="slide-image" src="img/carousel/drommingesoffa.png" style="height: 300px" alt=""/> </div> <div class="item"> <img class="slide-image" src="img/carousel/durbankonstrottinggrupp.png" style="height: 300px" alt=""/> </div> <div class="item"> <img class="slide-image" src="img/carousel/nydalagrupp.png" style="height: 300px" alt=""/> </div> <div class="item"> <img class="slide-image" src="img/carousel/shabbygrupp.png" style="height: 300px" alt=""/> </div> <div class="item"> <img class="slide-image" src="img/carousel/sodertorpsoffabyggbar.png" style="height: 300px" alt=""/> </div> <div class="item"> <img class="slide-image" src="img/carousel/tannohammock.png" style="height: 300px" alt=""/> </div> <div class="item"> <img class="slide-image" src="img/carousel/torpettradgardsgrupp.png" style="height: 300px" alt=""/> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> <div class="row"> <div class="col-sm-4 col-lg-4 col-md-4"> <div class="thumbnail"> <img src="http://placehold.it/320x150" alt=""> <div class="caption"> <h4 class="pull-right">$24.99</h4> <h4><a href="#">first product</a> </h4> <p>see more snippets online store item @ <a target="_blank" href="http://www.bootsnipp.com">bootsnipp - http://bootsnipp.com</a>.</p> </div> <div class="ratings"> <p class="pull-right">15 reviews</p> <p> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> </p> </div> </div> </div> <div class="col-sm-4 col-lg-4 col-md-4"> <div class="thumbnail"> <img src="http://placehold.it/320x150" alt=""> <div class="caption"> <h4 class="pull-right">$64.99</h4> <h4><a href="#">second product</a> </h4> <p>this short description. lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="ratings"> <p class="pull-right">12 reviews</p> <p> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </p> </div> </div> </div> <div class="col-sm-4 col-lg-4 col-md-4"> <div class="thumbnail"> <img src="http://placehold.it/320x150" alt=""> <div class="caption"> <h4 class="pull-right">$74.99</h4> <h4><a href="#">third product</a> </h4> <p>this short description. lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="ratings"> <p class="pull-right">31 reviews</p> <p> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </p> </div> </div> </div> <div class="col-sm-4 col-lg-4 col-md-4"> <div class="thumbnail"> <img src="http://placehold.it/320x150" alt=""> <div class="caption"> <h4 class="pull-right">$84.99</h4> <h4><a href="#">fourth product</a> </h4> <p>this short description. lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="ratings"> <p class="pull-right">6 reviews</p> <p> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> </p> </div> </div> </div> <div class="col-sm-4 col-lg-4 col-md-4"> <div class="thumbnail"> <img src="http://placehold.it/320x150" alt=""> <div class="caption"> <h4 class="pull-right">$94.99</h4> <h4><a href="#">fifth product</a> </h4> <p>this short description. lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="ratings"> <p class="pull-right">18 reviews</p> <p> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </p> </div> </div> </div> <div class="col-sm-4 col-lg-4 col-md-4"> <h4><a href="#">like template?</a> </h4> <p>if template, check out <a target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this tutorial</a> on how build working review system online store!</p> <a class="btn btn-primary" target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">view tutorial</a> </div> </div> </div> </div> </div> <!-- /.container --> <hr> <!-- footer --> <footer class="footer"> <div class="col-lg-12"> <p>copyright © torhultsbrunn 2015</p> </div> </footer> <!-- jquery --> <script src="js/jquery.js"></script> <!-- bootstrap core javascript --> <script src="js/bootstrap.min.js"></script>
in shop-homepage.css have this:
margin: 50px 0; that's what's causing "fly" since it's applying margin forces up, though have bottom: 0; present, since including shop-homepage.css afer bootstrap.min.css it's overwriting previous .footer.
simply change to:
margin: 0px 0; 
Comments
Post a Comment