我有一个可能非常简单的问题。我正在使用 Twitter Boostrap 作为框架来开发一些登录页面以及我网站标题中的超大 Jquery Slider。在移动设备上查看网站或缩小浏览器窗口时会出现此问题。
Supersized 似乎接管了网站的内容背景并全屏运行,内容显示在其顶部。理想情况下,我希望超大滑块保持在标题内,而不是在移动设备查看时向下扩展内容的两侧。
这可能很简单,但我将不胜感激任何帮助!:)
网址:http ://www.landing.xeonweb.com.au/index2.html
标题 CSS:
.header{
width:100%;
height:700px;
clear:both;
overflow:hidden;
}
超大 CSS:
* { margin:0; padding:0; }
body { background:#111; height:100%; }
img { border:none; }
#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}
#supersized { display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/
#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
#supersized a { width:100%; height:100%; display:block; }
#supersized li.prevslide { z-index:-20; }
#supersized li.activeslide { z-index:-10; }
#supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
#supersized li.image-loading img{ visibility:hidden; }
#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
HTML 设置:
<div class="row">
<div id="top-message">
<p>Contact Us Today for our Monthly Special</p>
</div>
</div>
<div class="row">
<div class="header">
<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
</div><!--End Header-->
</div><!--End Row-->