Мне просто интересно, можете ли вы сказать мне, почему ползунок на www2.chrislrobinson.co.uk не работает должным образом. Я поднял код из их примеров. Кажется, что он отлично работает при первой загрузке страницы, но при обновлении изображение растягивается по всей странице и становится очень тонким (то есть высота и ширина обвиваются).
Вот соответствующий HTML:
<body>
<div id="container">
...
<div id="mainContent">
...
<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
и перефразированный CSS:
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
width:696px;
height:241px;
overflow:hidden;
}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000 url('images/bg.png') no-repeat top center;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
}
#container {
width: 804px; /* this will create a container 80% of the browser width */
background: transparent;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
/*border: 2px solid rgba(255,255,255,1);*/
}
#mainContent {
background: rgba(60,60,60,0.75) no-repeat top center;
width: 800px;
border: 2px solid rgba(184,0,31,1);
padding: 0px;
min-height: 600px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
min-height: 400px;
clear: both;
}
span#prevBtn{}
span#nextBtn{}
Спасибо!
Chris
EDIT:
Если вы продолжите обновлять его, это в конце концов снова сработает! Но это не совсем решение ...
РЕДАКТИРОВАТЬ 2:
Я обнаружил, что когда он отображается странно, это HTML:
<div id="slider" style="width: 953px; height: 18px; overflow-x: hidden; overflow-y: hidden; ">
Кто-нибудь знает, почему это может измениться?