my footer doesn't seem want sit below .wrapper.
the closest have gotten getting un-merge top page, telling bottom: 0px, sits awkwardly in middle of page.
clear:both hasn't worked.
i'm worried may in jssor javascript that's messing up.
#slider1_container { position: absolute; float: right; top: 50px; left: 40%; width: 60%; height: 900px; background: #333; overflow: hidden; } .wrapper { position: absolute; width: 100%; background-color: #404041; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; } footer { position: absolute; display: block; width: 100%; background-color: #feede4; height: 250px; }<body> <div class="wrapper"> <div id="slider1_container"> <!-- loading screen --> <div class="loading" u="loading"> <div class="loadingstyle1"></div> <div class="loadingstyle2"></div> </div> <!-- images --> <div u="slides" class="slides"> <div> <img u="image" src="images/hotel/full/image-29.jpg" /> <img u="thumb" src="images/hotel/thumbnail/image-29.jpg" /> </div> <div> <img u="image" src="images/hotel/full/image-30.jpg" /> <img u="thumb" src="images/hotel/thumbnail/image-30.jpg" /> </div> <div> <img u="image" src="images/hotel/full/image-31.jpg" /> <img u="thumb" src="images/hotel/thumbnail/image-31.jpg" /> </div> <div> <img u="image" src="images/hotel/full/image-32.jpg" /> <img u="thumb" src="images/hotel/thumbnail/image-32.jpg" /> </div> <!-- arrow left --> <span u="arrowleft" class="jssora05l" style="top: 158px; left: 248px;"> </span> <!-- arrow right --> <span u="arrowright" class="jssora05r" style="top: 158px; right: 8px"> </span> <!-- thumbnail navigator container --> <div u="thumbnavigator" class="jssort02" style="left: 0px; bottom: 0px;"> <!-- thumbnail item skin begin --> <div u="slides" style="cursor: default;"> <div u="prototype" class="p"> <div class=w> <div u="thumbnailtemplate" class="t"></div> </div> <div class=c></div> </div> </div> <!-- thumbnail item skin end --> </div> </div> <div class="push"></div> </div> <footer>jasoldk;as'dlas'd</footer> </div> </body>
you have 2 styles causing trouble on #slide1_container:
#slider1_container{ position: absolute; float: right; top: 50px; left: 40%; width: 60%; height: 900px; background: #333; overflow: hidden; } there no point in floating , absolutely positioning something. either 1 cause issues next elements in layout. if absolutely position something, remove entirely layout flow. so, subsequent elements has no height (so footer appears @ top). if float element, have "clear float". 1 way use clearfix on container element. need remove position:absolute footer.
your logos , colors looking good...if learn basic css layout techniques, how various values position work, save frustration , time in building site.
Comments
Post a Comment