Здравствуйте. Есть такая примерная страница со слайдером:
http://magazavr.ru/slide/
Подскажите - как сделать, если возможно, чтобы при низком разрешении (например 1024x768, не ниже), горизонтальной прокрутки не было. Как это лучше организовать на данной странице при наличии крупного фото? Как описать лучше в CSS?
Буду очень благодарен за помощь
Небольшие коды html и css указанной страницы:
HTML код:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Текст</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>
<div id="slider">
<ul>
<li><img src="1.jpg" width="1000" height="667" alt="Image One" /></li>
<li><img src="2.jpg" width="1000" height="667" alt="Image Two" /></li>
<li><img src="3.jpg" width="1000" height="667" alt="Image Three" /></li>
<li><img src="4.jpg" width="1000" height="667" alt="Image Four" /></li>
</ul>
</div>
<div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>
<ul id="pagination" class="pagination">
<li onclick="slideshow.pos(0)"></li>
<li onclick="slideshow.pos(1)"></li>
<li onclick="slideshow.pos(2)"></li>
<li onclick="slideshow.pos(3)"></li>
</ul>
</div>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:4,
resume:true,
vertical:false,
navid:'pagination',
activeclass:'current',
position:0,
rewind:false,
elastic:true,
left:'slideleft',
right:'slideright'
});
</script>
</body>
CSS
Код:
* {margin:0; padding:0}
body {font:12px Verdana,Arial; color:#555; background:black}
p {line-height:1.4; margin-bottom:12px}
#wrapper {width:1115px; margin:50px auto}
#container {position:relative; background:black; padding:32px; height:667px; border-right:0px solid #ccc; border-bottom:0px solid #ccc}
.sliderbutton {float:left; width:25px; height:235px; cursor:pointer}
#slideleft {background:url(images/icons.gif) -50px -265px no-repeat}
#slideleft:hover {background-position:-0 -265px}
#slideright {background:url(images/icons.gif) 0 90px no-repeat}
#slideright:hover {background-position:-50px 90px}
#slider {float:left; position:relative; overflow:auto; width:1000px; height:667px}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:1000px; height:667px}
.pagination {position:absolute; top:40px; right:70px; list-style:none; height:25px}
.pagination li {float:left; cursor:pointer; height:8px; width:8px; background:#ccc; margin:0 4px 0 0; border:1px solid #fff}
.pagination li:hover, li.current {background:#fff}
