html - Footer sticked to bottom and geting issue with divs -
i have problem footer, want @ bottom of page , works when give fixed position property. don't want footer scroll screen. checked similar problems on stackoverflow , css sticky footer couldn't find 1 works me.
html code:
<!doctype html> <html> <head> <!--polskie znaki--> <meta charset="utf-8"> <!--responstywność--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt ie 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <!--arkusz styli--> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/superslides.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link href='https://fonts.googleapis.com/css?family=lato:100,200,300,400,700,900,300italic' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=montserrat:400,700' rel='stylesheet' type='text/css'> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous"> </head> <body> <div id="header"> <ul class="topnav"> <li style="padding:5px; margin-right: 50px;"><img src="img/logo.png"></li> <li><a class="active" href="#home">strona gŁÓwna</a></li> <li><a href="#news">nasze produkty</a></li> <li><a href="#contact">kontakt</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myfunction()"><img src="img/burgermenu.png" alt="rozwiń menu dla wersji responsywnej"></a></li> <form> <span><input type="text" class="search searchform" placeholder="szukaj..."></input></span> </form> </ul> <!--slider--> <div class="wide-container"> <div id="slides"> <ul class="slides-container"> <li> <img src="img/slider.jpg" alt=""> <h2>lata doświadczeń </br>      gwarancja profesjonalizmu.</h2> </li> <li> <img src="img/slider.jpg" alt="cinelli"> </li> <li> <img src="img/slider.jpg" width="1024" height="682" alt="surly"> </li> <li> <img src="img/slider.jpg" width="1024" height="683" alt="cinelli"> </li> <li> <img src="img/slider.jpg" width="1024" height="685" alt="affinity"> </li> </ul> <nav class="slides-navigation"> <a href="#" class="next"><img src="img/next.png" alt="następny"></a> <a href="#" class="prev"><img src="img/previous.png" alt="poprzedni"></a> </nav> </div> </div> <!--toggle sidebar--> <!-- ========================= sidebar ============================== --> <div id="content"> <section id="page"> <main class="middle"> <div class="row"> <div class="span3"> <div class="well"> <div> <ul class="nav nav-list"> <li><label class="tree-toggle nav-header">zestawy badań nieniszczących ndt<a href="#"><img id="openicon" src="img/openincon.png" alt="rozwiń"></a></label> <ul class="nav nav-list tree"> <li><a href="#">zmywacz</a></li> <li><a href="#">penetrant</a></li> <li><a href="#">wywyływacz</a></li> <li><a href="#">podkład biały</a></li> <li><a href="#">zawiesina czarnego proszku magnetycznego</a></li> <li><a href="#">penetracja fluorescencyjna</a></li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggle nav-header">Środki przeciwodpryskowe<a href="#"><img id="openicon" src="img/openincon.png" alt="rozwiń"></a></label> <ul class="nav nav-list tree"> <li><a href="#">preparat w postaci pasty</a></li> <li><label class="tree-toggle"><li>preparaty aerozolowe</li></label> <ul class="nav nav-list tree"> <li><a href="#">prep 1</a></li> <li><a href="#">prep 2</a></li> </ul> </li> <li><label class="tree-toggle"><li>preparaty w postaci cieczy</li></label> <ul class="nav nav-list tree"> <li><a href="#">prep 1</a></li> <li><a href="#">prep 2</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggle nav-header">Środki trawiące<a href="#"><img id="openicon" src="img/openincon.png" alt="rozwiń"></a></label> <ul class="nav nav-list tree"> <li><a href="#">pasty trawiące</a></li> <li><a href="#">płyn trawiący</a></li> <li><a href="#">płyn pasywujący ppas</a></li> <li><a href="#">pasta neutralizacyjn pn-1</a></li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggle nav-header">topniki<a href="#"><img id="openicon" src="img/openincon.png" alt="rozwiń"></a></label> <ul class="nav nav-list tree"> <li><a href="#">topniki lutów twardych - boraks</a></li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggle nav-header">luty twarde<a href="#"><img style="float:right;" src="img/openincon.png" alt="rozwiń"></a></label> <ul class="nav nav-list tree"> <li><a href="#">spoiwa mosiężne</a></li> <li><a href="#">spoiwa aluminiowe</a></li> <li><a href="#">spoiwa brązowe miedziane</a></li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggle nav-header">koncentrat biostatyczny gop<a href="#"><img style="float:right;" src="img/openincon.png" alt="rozwiń"></a></label> </ul> </div> </div> </div> </div> <!--obrazki tekst--> <div class="blocks"> <div class="block"> <div class="image"><img src="img/photo1.png" alt=""></div> </div> <div class="block"> <div class="image"><img src="img/photo1.png" alt=""></div> </div> <div class="block"> <div class="image"><img src="img/photo1.png" alt=""></div> </div> <div class="block"> <div class="image"><img src="img/photo1.png" alt=""></div> </div> <div class="block"> <div class="image"><img src="img/photo1.png" alt=""></div> </div> <div class="block"> <div class="image"><img src="img/photo1.png" alt=""></div> </div> </div> <!--kontakt--> <div class="container"> <div class="kontakt"> <div> <p>tel.:<span>+48 000 000 000</span></p> </div> <div> <p>e-mail.:<span>topchem@topchem.pl</span></p> </div> </div> </div> <div class="container-fluid sidetext"> <div class="row-fluid"> <h1 class="post-title">   o firmie    </h1> <p>fusce ut sem est. in eu sagittis felis. in gravida arcu ut neque ornare vitae rutrum turpis vehicula. nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; pellentesque interdum rutrum quam, pharetra est pulvinar ac. vestibulum congue nisl magna. ut vulputate odio id dui convallis in adipiscing libero condimentum. nunc et pharetra enim. praesent pharetra, neque et luctus tempor, leo sapien faucibus leo, dignissim turpis ipsum sed libero. sed sed luctus purus. aliquam faucibus turpis @ libero consectetur euismod. nam nunc lectus, congue non egestas quis, condimentum ut arcu. nulla placerat, tortor non egestas rutrum, mi turpis adipiscing dui, et mollis turpis tortor vel orci. cras fringilla nunc. suspendisse volutpat, eros congue scelerisque iaculis, magna odio sodales dui, vitae vulputate elit metus ac arcu. mauris consequat rhoncus dolor id sagittis. cras tortor elit, aliquet quis tincidunt eget, dignissim non tortor.</p> </div> </div> <!-- /.post --> <!-- /#content --> </main> </section> </div> <!--stopka--> <div class="clear"></div> <div id="footer_container"> <div class="footer-right"> <a href="#"><img src="img/twitter.png"></a> <a href="#"><img src="img/facebbok.png"></a> <a href="#"><img src="img/googleicon.png"></a> </div> <div class="footer-left"> <p class="footer-links"> <a href="#">strona główna</a> <a href="#">nasze produkty</a> <a href="#">kontakt</a> </p> </div> </div> <!-- /# <!--menu script--> <!-- latest compiled , minified javascript --> <script src="js/bootstrap.js"></script> <!--slider script--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.animate-enhanced.min.js"></script> <script src="js/jquery.superslides.min.js" type="text/javascript" charset="utf-8"></script> <script> $(function() { $('#slides').superslides({ inherit_width_from: '.wide-container', inherit_height_from: '.wide-container' }); }); </script> <!--nav script--> <script type="text/javascript"> $('.tree-toggle').click(function () { $(this).parent().children('ul.tree').toggle(200); }); $(function(){ $('.tree-toggle').parent().children('ul.tree').toggle(200); }) </script> </body> </html> css code:
<style> body { margin: 0; padding: 0; height: 100%; } html { background: #ececec; box-sizing: border-box; } #page{ background: #ececec; margin-bottom: 100px; } *, *:before, *:after { box-sizing: inherit; } /* top navigation */ ul.topnav { list-style-type: none; margin: 0; padding: 10px; overflow: hidden; background-color: #ffffff; font-family: 'lato', sans-serif; color: #343e5c; } ul.topnav li {float: left;} ul.topnav li { display: inline-block; color: #343e5c; text-align: left; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 12pt; } ul.topnav form { float:right; margin-right: 40px; } ul.topnav li a:hover {background-color: #f2f3f4;} ul.topnav li.icon {display: none;} @media screen , (max-width:680px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav form:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen , (max-width:680px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li { display: block; text-align: left; } ul.topnav.responsive form { float: center; display: inline; } } /* search bar */ .search { padding:15px 15px 15px 49px; margin:3px; background: url('../img/search.png') no-repeat 20px 15px; } .searchform { background-color: #c0dbf3; border:none; } input[type=text]{ color:#4f98d7; } ::-webkit-input-placeholder { /* webkit browsers */ color:#4f98d7; font-weight:bold; } :-moz-placeholder { /* mozilla firefox 4 18 */ color:#4f98d7; font-weight:bold; } ::-moz-placeholder { /* mozilla firefox 19+ */ color:#4f98d7; font-weight:bold; } :-ms-input-placeholder { /* internet explorer 10+ */ color:#4f98d7; font-weight:bold; } /* slider */ .wide-container { height: 600px; margin: 0 auto; } /* toggle sidebar */ .middle { max-width: 1300px; background: #ececec; position: absolute; color: #343e5c; margin-left: 10%; margin-right: 15%; padding-bottom: 140px; height: auto !important; } .row{ padding: 0 10px; width: 30%; float: left; margin-left: 0px; } .span3{ margin: 30px 30px 10px 15px; } .well{ list-style-type: none; } #openicon{ float: right; } li.divider{ border-bottom: 1px solid #e4e5e7; margin-bottom: 10px; margin-top: 5px; } /* main */ .blocks { float: right; width: 70%; } .blocks .block { display: inline-block; margin: 30px 30px 10px 0px; } .sidetext{ float: right; max-width: 70%; } .row-fluid{ margin-right: 20%; text-align: justify; font-family: 'lato', sans-serif; color: #b2b2b2; } @media screen , (min-width:1282px) , (max-width:1920px){ .middle{ float: center; } .kontakt{ font-size:10pt; font-family: 'lato', sans-serif; font-weight: 700; float: left; position: relative; width: 325px; margin-left: -70px; border-radius: 5px; background: #f5f5f5; padding: 20px; border: 1px solid #e3e3e3; } } @media screen , (min-width:981px) , (max-width:1281px){ .kontakt{ width: 285px; margin-left: -5px; float: left; } } @media screen , (min-width:681px) , (max-width:980px) { .row{ width: 100%; } .blocks{ width: 100%; margin-right: -30px; } .blocks .block { display: inline-block; } .kontakt{ margin: 20px -10px 20px 10px; width: 95%; } .sidetext{ max-width: 100%; float: center; } .row-fluid{ margin-right: 0; text-align: justify; } } @media screen , (min-width:481px) , (max-width:680px) { .row{ width: 100%; } .blocks{ width: 100%; margin: 20px 0% 10px 9%; } .blocks .block { display: inline-block; } .kontakt{ margin: 20px -10px 20px 10px; width: 95%; } .middle{ margin-right: 10px; margin-left: 0px; max-width: 680px; } .sidetext{ max-width: 100%; float: center; } .row-fluid{ margin-right: 0; text-align: justify; } } @media screen , (min-width:2px) , (max-width:480px){ html { -webkit-text-size-adjust: none; } .row{ width: 100%; } .blocks{ width: 100%; } .blocks .block { display: inline-block; width: 100%; margin-left: 18%; } .kontakt{ width: 100%; } .middle{ margin-left: 5px; margin-right: 5px; } .sidetext{ max-width: 100%; float: center; } .row-fluid{ margin-right: 0; text-align: justify; } } /* kontakt */ .kontakt{ font-size:12pt; font-family: 'lato', sans-serif; font-weight: 700; float: left; position: relative; border-radius: 5px; background: #f5f5f5; padding: 20px; border: 1px solid #e3e3e3; } .kontakt span{ font-family: 'lato', sans-serif; font-weight: 100; margin-left:auto; } /************************************************************************************ content *************************************************************************************/ /* post */ .post-title { font-family: 'lato', sans-serif; font-weight: 700; font-size: 11pt; text-align: center; border-bottom: 1px solid #445485; padding: 10px 0 10px 0; color: #343e5c; } /************************************************************************************ footer *************************************************************************************/ #footer_container { clear: both; position:fixed; bottom:0px; background-color: #336699; width:100%; text-align:center; padding: 35px 40px; text-align: left; font-family: 'montserrat', sans-serif; font-weight: 600; background-color: #292c2f; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); } #footer_container .footer-left p{ text-transform: uppercase; color: #8f9296; font-size: 13px; margin: 0; } /* footer links */ #footer_container p.footer-links{ font-size:13px; font-weight: bold; color: #ffffff; margin: 0 0 10px; padding: 0; } #footer_container p.footer-links a{ display:inline-block; line-height: 1.8; text-decoration: none; color: inherit; margin-right: 30px; } #footer_container .footer-right{ float: right; margin-top: 6px; max-width: 180px; } #footer_container .footer-right a{ display: inline-block; width: 35px; height: 35px; background-color: #33383b; border-radius: 2px; font-size: 20px; color: #ffffff; text-align: center; line-height: 35px; margin-left: 3px; } /* if don't want footer responsive, remove these media queries */ @media (max-width: 600px) { .footer-distributed .footer-left, .footer-distributed .footer-right{ text-align: center; } .footer-distributed .footer-right{ float: none; margin: 0 auto 20px; } .footer-distributed .footer-left p.footer-links{ line-height: 1.8; } } /* ie 6 */ * html #footer_container { position:absolute; top:expression((0-(footer.offsetheight)+(document.documentelement.clientheight ? document.documentelement.clientheight : document.body.clientheight)+(ignoreme = document.documentelement.scrolltop ? document.documentelement.scrolltop : document.body.scrolltop))+'px'); } </style>
your html has lot of errors.
for example:
<input type="text" class="search searchform" placeholder="szukaj..."></input> should self-closing like:
<input type="text" class="search searchform" placeholder="szukaj..." /> also: </br> should <br /> (also self-closing).
and there's random </ul> @ line 132 doesn't close <ul>.
try fix errors first, because make browser malfunction.
however, footer should on end of document position:static css attribute. put @ th bottom of long it's block
Comments
Post a Comment