html - CSS layout, footer is midway-up the content -
i need me this. in css layout, footer midway contents instead of being positioned right below. code can seen here. pls me, not sure went wrong, spent time on this.
html:
<title>my reporting system</title> <link rel="stylesheet" type="text/css" href="style.css" /> <body> <div id="user-logged"> logged in : <strong>user</strong><br>logout </div> <hr> <div> <a id="logo" href="."> <img id="logo" src="images/logo.png" alt="brs"/> </a> <div id="sidebar"> <h1 style="color:#fff; padding-left:20px; font-size:15px;"> reporting system </h1> <ul> <li>outlet settings</li> <li>update daily stats</li> <li>void stats</li> <li>email report</li> </ul> </div> </div> <div class="body-content"> lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pharetra eget lacus vitae elementum. morbi justo est. aenean aliquet elit ac nunc vestibulum rutrum. vestibulum blandit pellentesque erat, imperdiet sem. in egestas in sapien @ pellentesque. praesent non commodo nunc. integer porta malesuada placerat. maecenas nec sem varius, suscipit sem vitae, vulputate ligula. nam sed ligula suscipit, faucibus augue et, iaculis nibh. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. nam @ neque vel est elementum tincidunt. nullam accumsan finibus mauris, non auctor enim. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; ut @ ligula eu turpis volutpat aliquet et et quam. aliquam est nulla, eleifend eu nibh a, lobortis mollis ex. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. sed cursus, dui eu finibus ultricies, leo velit laoreet sapien, in pretium lectus ipsum quis turpis. ut ornare nulla eu facilisis condimentum. etiam venenatis tellus et lorem dapibus, et vestibulum mauris facilisis. etiam quis feugiat orci, sit amet blandit nisl. phasellus feugiat auctor vehicula. quisque congue enim leo, nec sagittis sem tincidunt vitae. in in tellus lacus. aenean porta ligula sed est bibendum, sed tincidunt eros pellentesque. suspendisse potenti. lorem ipsum dolor sit amet, consectetur adipiscing elit. curabitur vitae lacus justo tempor semper nec eu nisl. in odio feugiat, mattis urna eu, efficitur risus. aliquam laoreet magna vitae convallis. quisque vehicula urna sit amet nisl faucibus facilisis. quisque velit arcu, pretium sit amet solli citudin quis, venenatis vitae lectus. quisque aliquam scelerisque metus, vitae hendrerit ipsum porta at. ut nec dui non metus gravida ultrices. donec id arcu sit amet enim auctor iaculis nec velit. etiam lobortis vulputate pharetra. ut pellentesque pellentesque ligula non efficitur. in sit amet velit accumsan, cursus ipsum eget, fringilla magna. proin quam eros, gravida ut interdum ut, commodo id odio. donec sed nisl dolor. aenean metus eros, hendrerit et purus vel, ultricies ultricies magna. cras lobortis, ipsum ut aliquam hendrerit, erat nulla rhoncus enim, iaculis elit ante sed sem. praesent sit amet porttitor justo. cras aliquam purus et mi hendrerit iaculis. aliquam vestibulum felis urna, sit amet hendrerit leo suscipit pulvinar. nullam tempus mattis diam. nunc ut eros nec felis congue molestie. donec bibendum condimentum risus, ut tristique nisl varius at. maecenas gravida lectus ac facilisis pulvinar. nullam diam purus, ullamcorper nunc eget, cursus vehicula eros. integer pharetra, eros sit amet blandit rhoncus, elit nisi congue dolor, ac faucibus odio sem id lectus. fusce tempor, metus sit amet ultrices egestas, tortor ligula egestas est, condimentum tellus velit nec augue. aliquam arcu velit, sagittis nec risus in, eleifend iaculis dui. nulla interdum gravida gravida. in vel facilisis ex. etiam risus est, ornare eget bibendum a, convallis vel turpis. nullam lacinia leo quam, vel malesuada libero faucibus vitae. in in velit interdum, hendrerit erat sit amet, gravida nisl. praesent porta massa. nunc sagittis purus tortor, ut elementum massa efficitur vel. vestibulum hendrerit convallis lectus, vitae scelerisque dolor fermentum vel. sed mauris ligula, facilisis vel neque vel, pretium fermentum diam. aliquam ullamcorper dolor mauris, ac dictum ipsum consectetur at. aliquam et posuere ligula, in scelerisque sem. proin euismod finibus libero sagittis placerat. morbi vehicula nulla enim, vel mollis metus tincidunt eu. phasellus ipsum lorem, finibus eget mattis nec, suscipit vitae enim. donec sed sagittis elit. suspendisse id malesuada justo, et venenatis arcu. nullam mauris est, iaculis eget imperdiet nec, feugiat quis lectus. ut id nulla dui. vivamus pretium metus fringilla mi tincidunt commodo. proin id augue eu justo euismod vulputate eget sapien. nunc sit amet tellus dapibus, vulputate ante fringilla, scelerisque neque. etiam in porttitor metus, quis lacinia diam. maecenas vel sem purus. nam id tortor sit amet urna semper accumsan vitae quis purus. integer nibh dui, maximus vel tellus ac, pretium dictum tortor. duis non dolor sit amet risus sollicitudin convallis nec sit amet velit. etiam porttitor sit amet libero id tristique. vivamus nec egestas neque. sed lobortis consectetur dolor, vitae gravida sapien. mauris nec leo volutpat, tristique nisl vel, euismod ante. quisque aliquet urna elit, sit amet mattis mi iaculis ut. donec risus libero, ultricies vel erat quis, gravida egestas dui. nam imperdiet arcu in sollicitudin aliquam. proin sit amet erat quis est porta pharetra. nam tortor purus, aliquam id imperdiet ac, pulvinar ut ligula. pellentesque sollicitudin augue @ dolor tristique elementum. curabitur posuere finibus nulla sit amet maximus. donec lobortis justo eu sem lobortis, quis convallis magna ultrices. maecenas nunc ligula, tincidunt @ felis a, volutpat scelerisque leo. cras auctor velit nec orci rutrum commodo. vestibulum bibendum elit nec quam ultricies facilisis. maecenas mattis sem ut lorem luctus, eu suscipit erat elementum. sed posuere, orci nec pretium convallis, sem odio sodales metus, sit amet consectetur elit justo non mauris. proin nec nibh sit amet diam varius mattis rutrum erat. in hac habitasse platea dictumst. praesent ut porta nunc, tincidunt lectus. mauris leo purus, tincidunt sit amet urna et, vehicula rutrum nunc. suspendisse volutpat varius nisl in tincidunt. maecenas ac convallis ex, eu gravida libero. vivamus elit tortor, pharetra vestibulum tincidunt vel, tincidunt id nulla. donec finibus eros sed felis sollicitudin condimentum ut @ orci. nullam @ risus tincidunt, viverra quam sed, eleifend mi. donec eu neque ac arcu porta euismod. nullam vel pellentesque nisl. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. sed malesuada dolor quis tortor auctor pharetra. aenean pretium sem rhoncus, pretium arcu sed, sagittis leo. aliquam tincidunt, est non condimentum maximus, purus ex feugiat ante, vitae rhoncus mi orci sed orci. curabitur fermentum urna ut dolor aliquam ornare. vivamus tempus massa ac tincidunt. donec lacinia mi ac odio commodo volutpat. sed eu dolor tincidunt, convallis lectus at, feugiat dolor. donec vehicula dolor ut dictum volutpat. </div> <div id="footer"> test 2015. rights reserved. </div> </body> css:
#logo { position:absolute; top:5px; left:15px; width:150px; height:auto; } #sidebar { width:200px; min-height:500px; height:auto; background-color: #6699cc; padding:1px; } #user-logged { top:0px; right:0px; text-align: right; padding-top:50px; padding-right:10px; margin-left:200px; height:50px; min-width:200px; } .body-content { position:absolute; top:126px; margin-left:202px; min-height:700px; background-color: #ccc; width:80%; clear:both; height: auto !important; } #footer { position:absolute; padding-top:20px; width:100%; height:150px; font-size:12px; background-color: #cc9966; text-align:center; font-weight:bold; color:#fff; }
the issue being caused way absolute positioning .body-content div. absolutely positioned div removed flow of document, footer doesn't know how appear 'after' content div, , instead shifts next logical position. i've made few modifications here to give idea of how might use floats replace absolute positioning.
the modifications include floating sidebar , .body-content, removing clear: both .body-content, , adjusting width of .body-content. may need further adjustments, should point in right direction.
(if absolute positioning requirement, may have take different approach.)
#logo { position: absolute; top: 5px; left: 15px; width: 150px; height: auto; } #sidebar { width: 200px; min-height: 500px; height: auto; background-color: #6699cc; padding: 1px; float: left; } #user-logged { top: 0px; right: 0px; text-align: right; padding-top: 50px; padding-right: 10px; margin-left: 200px; height: 50px; min-width: 200px; } .body-content { float: left; min-height: 700px; background-color: #ccc; width: 65%; height: auto !important; } #footer { clear: both; padding-top: 20px; width: 100%; height: 150px; font-size: 12px; background-color: #cc9966; text-align: center; font-weight: bold; color: #fff; }<div id="user-logged"> logged in : <strong>user</strong> <br>logout </div> <hr> <div> <a id="logo" href="."> <img id="logo" src="images/logo.png" alt="brs" /> </a> <div id="sidebar"> <h1 style="color:#fff; padding-left:20px; font-size:15px;">my reporting system</h1> <ul> <li>outlet settings</li> <li>update daily stats</li> <li>void stats</li> <li>email report</li> </ul> </div> </div> <div class="body-content"> lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pharetra eget lacus vitae elementum. morbi justo est. aenean aliquet elit ac nunc vestibulum rutrum. vestibulum blandit pellentesque erat, imperdiet sem. in egestas in sapien @ pellentesque. praesent non commodo nunc. integer porta malesuada placerat. maecenas nec sem varius, suscipit sem vitae, vulputate ligula. nam sed ligula suscipit, faucibus augue et, iaculis nibh. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. nam @ neque vel est elementum tincidunt. nullam accumsan finibus mauris, non auctor enim. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; ut @ ligula eu turpis volutpat aliquet et et quam. aliquam est nulla, eleifend eu nibh a, lobortis mollis ex. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. sed cursus, dui eu finibus ultricies, leo velit laoreet sapien, in pretium lectus ipsum quis turpis. ut ornare nulla eu facilisis condimentum. etiam venenatis tellus et lorem dapibus, et vestibulum mauris facilisis. etiam quis feugiat orci, sit amet blandit nisl. phasellus feugiat auctor vehicula. quisque congue enim leo, nec sagittis sem tincidunt vitae. in in tellus lacus. aenean porta ligula sed est bibendum, sed tincidunt eros pellentesque. suspendisse potenti. lorem ipsum dolor sit amet, consectetur adipiscing elit. curabitur vitae lacus justo tempor semper nec eu nisl. in odio feugiat, mattis urna eu, efficitur risus. aliquam laoreet magna vitae convallis. quisque vehicula urna sit amet nisl faucibus facilisis. quisque velit arcu, pretium sit amet solli citudin quis, venenatis vitae lectus. quisque aliquam scelerisque metus, vitae hendrerit ipsum porta at. ut nec dui non metus gravida ultrices. donec id arcu sit amet enim auctor iaculis nec velit. etiam lobortis vulputate pharetra. ut pellentesque pellentesque ligula non efficitur. in sit amet velit accumsan, cursus ipsum eget, fringilla magna. proin quam eros, gravida ut interdum ut, commodo id odio. donec sed nisl dolor. aenean metus eros, hendrerit et purus vel, ultricies ultricies magna. cras lobortis, ipsum ut aliquam hendrerit, erat nulla rhoncus enim, iaculis elit ante sed sem. praesent sit amet porttitor justo. cras aliquam purus et mi hendrerit iaculis. aliquam vestibulum felis urna, sit amet hendrerit leo suscipit pulvinar. nullam tempus mattis diam. nunc ut eros nec felis congue molestie. donec bibendum condimentum risus, ut tristique nisl varius at. maecenas gravida lectus ac facilisis pulvinar. nullam diam purus, ullamcorper nunc eget, cursus vehicula eros. integer pharetra, eros sit amet blandit rhoncus, elit nisi congue dolor, ac faucibus odio sem id lectus. fusce tempor, metus sit amet ultrices egestas, tortor ligula egestas est, condimentum tellus velit nec augue. aliquam arcu velit, sagittis nec risus in, eleifend iaculis dui. nulla interdum gravida gravida. in vel facilisis ex. etiam risus est, ornare eget bibendum a, convallis vel turpis. nullam lacinia leo quam, vel malesuada libero faucibus vitae. in in velit interdum, hendrerit erat sit amet, gravida nisl. praesent porta massa. nunc sagittis purus tortor, ut elementum massa efficitur vel. vestibulum hendrerit convallis lectus, vitae scelerisque dolor fermentum vel. sed mauris ligula, facilisis vel neque vel, pretium fermentum diam. aliquam ullamcorper dolor mauris, ac dictum ipsum consectetur at. aliquam et posuere ligula, in scelerisque sem. proin euismod finibus libero sagittis placerat. morbi vehicula nulla enim, vel mollis metus tincidunt eu. phasellus ipsum lorem, finibus eget mattis nec, suscipit vitae enim. donec sed sagittis elit. suspendisse id malesuada justo, et venenatis arcu. nullam mauris est, iaculis eget imperdiet nec, feugiat quis lectus. ut id nulla dui. vivamus pretium metus fringilla mi tincidunt commodo. proin id augue eu justo euismod vulputate eget sapien. nunc sit amet tellus dapibus, vulputate ante fringilla, scelerisque neque. etiam in porttitor metus, quis lacinia diam. maecenas vel sem purus. nam id tortor sit amet urna semper accumsan vitae quis purus. integer nibh dui, maximus vel tellus ac, pretium dictum tortor. duis non dolor sit amet risus sollicitudin convallis nec sit amet velit. etiam porttitor sit amet libero id tristique. vivamus nec egestas neque. sed lobortis consectetur dolor, vitae gravida sapien. mauris nec leo volutpat, tristique nisl vel, euismod ante. quisque aliquet urna elit, sit amet mattis mi iaculis ut. donec risus libero, ultricies vel erat quis, gravida egestas dui. nam imperdiet arcu in sollicitudin aliquam. proin sit amet erat quis est porta pharetra. nam tortor purus, aliquam id imperdiet ac, pulvinar ut ligula. pellentesque sollicitudin augue @ dolor tristique elementum. curabitur posuere finibus nulla sit amet maximus. donec lobortis justo eu sem lobortis, quis convallis magna ultrices. maecenas nunc ligula, tincidunt @ felis a, volutpat scelerisque leo. cras auctor velit nec orci rutrum commodo. vestibulum bibendum elit nec quam ultricies facilisis. maecenas mattis sem ut lorem luctus, eu suscipit erat elementum. sed posuere, orci nec pretium convallis, sem odio sodales metus, sit amet consectetur elit justo non mauris. proin nec nibh sit amet diam varius mattis rutrum erat. in hac habitasse platea dictumst. praesent ut porta nunc, tincidunt lectus. mauris leo purus, tincidunt sit amet urna et, vehicula rutrum nunc. suspendisse volutpat varius nisl in tincidunt. maecenas ac convallis ex, eu gravida libero. vivamus elit tortor, pharetra vestibulum tincidunt vel, tincidunt id nulla. donec finibus eros sed felis sollicitudin condimentum ut @ orci. nullam @ risus tincidunt, viverra quam sed, eleifend mi. donec eu neque ac arcu porta euismod. nullam vel pellentesque nisl. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. sed malesuada dolor quis tortor auctor pharetra. aenean pretium sem rhoncus, pretium arcu sed, sagittis leo. aliquam tincidunt, est non condimentum maximus, purus ex feugiat ante, vitae rhoncus mi orci sed orci. curabitur fermentum urna ut dolor aliquam ornare. vivamus tempus massa ac tincidunt. donec lacinia mi ac odio commodo volutpat. sed eu dolor tincidunt, convallis lectus at, feugiat dolor. donec vehicula dolor ut dictum volutpat. </div> <div id="footer"> test 2015. rights reserved. </div>
Comments
Post a Comment