[решено] Трудности с одним моментом в резиновом дизайне страницы

[решено] Трудности с одним моментом в резиновом дизайне страницы

Новый участник

Сообщения: 11
Благодарности: 0

Здравствуйте. Есть такая примерная страница со слайдером: 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}

Отправлено: 21:46, 21-09-2013