1

Здравствуйте! Помогите, пожалуйста, не могу разобраться как сделать слайдер резиновым. У меня центральный блок сайта тянется под размер экрана, а слайдер, который нашел, не могу поправить. Очень буду благодарен за помощь!

Вот код CSS:

/* ------------------------------- 0.Настройки тела страницы --------------------------------*/
body {
    margin:0;
    padding:0;
    background:#b8b8b8 url(../images/pattern.gif);
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#545454;
    text-align:left; }

/* ------------------------------- 1.Ссылки --------------------------------*/
a.back{
    color:#777;
    text-decoration:none;
}
a:hover { color:#505AE0; text-decoration:none; }
/* ------------------------------- 2.Структура контейнера --------------------------------*/

/* Основа ротатора изображений */
#banner { padding:0 0 30px 0; background:#ebebeb url(../images/shadow0.png) bottom no-repeat; margin:0; height:260px; text-align:center; }

/* Контейнер */
#container { width:960px; margin: 20px auto;  }

/*=== Пользовательские стили Слайдера ===*/

#slider-wrapper { background:none; width:960px; padding:0; margin:auto; }

#slider { position:relative; width:960px; height:260px; background:url(../images/loading.png) no-repeat 50% 50%; }
#slider img { position:absolute; top:0px; left:0px; display:none; }
#slider a { border:0; display:block; }

.nivo-controlNav { margin:auto; padding:0; position:absolute; bottom:-19px; left:440px; text-align:center; margin:auto; }
.nivo-controlNav a { display:block; width:15px; height:15px;
    background:url(../images/bullets.png) no-repeat;    text-indent:-9999px;
    border:0; margin-right:3px; float:left; position:relative; z-index:30; cursor:pointer; }
.nivo-controlNav a.active { font-weight:bold; background-position:0 -22px; }

.nivo-directionNav a { display:block; width:56px; height:50px;
    background:url(../images/arrows.png) no-repeat;
    text-indent:-9999px; border:0; position:absolute; top:45%;
    z-index:30; cursor:pointer; }
a.nivo-nextNav { background-position:-56px 0; top:101px; right:-15px; }
a.nivo-nextNav:hover { background-position:-56px -50px; }
a.nivo-prevNav { top:101px; left:-15px; }
a.nivo-prevNav:hover { background-position:0 -50px; }

/* Nivo Slider стили */
.nivoSlider { position:relative; }
.nivoSlider img { position:absolute; top:0px; left:0px; }
/* Если изображение обвернуто в ссылку */
.nivoSlider a.nivo-imageLink { position:absolute;
    top:0px; left:0px; width:100%; height:100%;
    border:0; padding:0; margin:0; z-index:20; display:none; }
/* The slices in the Slider */
.nivo-slice { display:block; position:absolute; z-index:10; height:100%; }
/* Стили заголовка */
.nivo-caption { position:absolute; left:0px; bottom:0px; font:13px calibri;
    padding:0; margin:0; color:#CCC; background:#000; opacity:0.7; width:100%; z-index:29; }

.nivo-caption p { margin:0; padding:10px 15px 10px 15px;}
.nivo-caption a { color:#efe9d1; text-decoration:underline; display:inline !important; }
.nivo-html-caption { display:none; }

1 ответ 1

0

У вас же блоки фиксированных размеров:

#container { width:960px;...}
#slider-wrapper{width:960px;...}
#slider{widht:960px; height:260px}

сделайте контейнеру ширину 100% и max-width:960px, ну и внутренние блоки установите в 100%

1
  • @kupas, это понятно, делал, не помогает
    – DimasikYES
    24 июл 2014 в 20:02

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.