2016-06-21 11 views
0

Ich habe gerade eine Seite mit einer Fußzeile eingerichtet, die einen Newsticker und eine Uhr enthält. Ich habe den Slider funktioniert mit Superslides Addon, aber ich bin mir nicht sicher, ob dies ein Bug oder ein Fehler in meiner Codierung ist.potenzieller Fehler in Superglides jquery addon?

Wenn der Übergang passiert, deckt es die Hälfte der Fußzeile ab. Ich habe den Code an der folgenden Stelle hochgeladen, um das Problem anzuzeigen.

http://discoveryschoolstrust.org.uk/signage

HTML

<div id="slides"> 
<div class="slides-container"> 
    <img src="images/people.jpeg" alt="Cinelli"> 
    <img src="images/surly.jpeg" width="1024" height="682" alt="Surly"> 
    <img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli"> 
    <img src="images/affinity.jpeg" width="1024" height="685" alt="Affinity"> 
</div> 
    </div> 

<div id="footer"> 
<div id="tickernews-container"> 

        <ul id="tickernews" style="height: 60px; overflow: hidden;"> 

         <div id="time"><span class="hour"></span></div> 

        <li style="margin-top: 0px;"> 
          Fully customizable to every kind of vertical scrolling need. 
         </li><li style="margin-top: 0px;"> 
          Light-weight and optimized JQuery plugin. 
         </li><li style="margin-top: 0px;"> 
          A powerful, flexible and animated vertical news ticker plugin. 
         </li><li style="margin-top: 0px;"> 
          Provides hight flexibility thanks to numerous callbacks &amp; methods. 
         </li></ul> 
       </div> 
</div> 


<!-- Bootstrap core JavaScript 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="js/jquery.superslides.js" type="text/javascript" charset="utf-8"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/prism.js"></script> 
<script src="js/jquery.mCustomScrollbar.min.js"></script> 
<script src="js/jquery.newsTicker.js"></script> 
<script src="js/jquery.easing-1.3.js"></script> 
</body> 

CSS für Footer

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
margin-bottom: 60px; 
} 
#footer { 
position: absolute; 
bottom: 0; 
width: 100%; 
background-color: #f5f5f5; 
} 
+0

einfach genug einfach fügen Sie einen Z-Index zu #footer – Hazonko

+1

brilliant, ich hatte noch nie zuvor von Z-Index gehört. Wenn Sie es in eine Antwort setzen wollen, werde ich es als richtig markieren. – Nathan

Antwort

0

Grundsätzlich ist der Schieber, wie es Übergänge hat einen höheren Z-Index als der Fußzeile. Alle positionierten Elemente können einen Z-Index haben, der in der Reihenfolge der Dinge höher oder niedriger erscheint.

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background-color: #f5f5f5; 
    z-index: 2; 
}