Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Резиновый горизонтальый слайдер, Резиновый горизонтальый слайдер 
:(
    Опции темы
dma84
Дата 8.7.2011, 11:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет



Если блоков должно быть 3 в прокручиваемом блоке, то ставим им ширину 33.3%, как-то так:

Код

<style type="text/css">
  #s{border:1px blue solid}
  #s div{border:1px solid red; display:inline-block;width:33.3%;height:200px;}
  *html #s div{display:inline !important;zoom:1}
  *+html #s div{display:inline !important;zoom:1}
  *html a.left{left:-20px !important}
 </style>
 <div id="main" style="position:relative;white-space:nowrap;border:1px green solid;overflow:hidden;padding:0 20px">
  <a class="left" style="display:inline-block;position:absolute;left:0;top:0;margin-top:100px" onclick="prev()" href="#"><--</a>
                <div id="s" style="width:100%;display:inline-block;overflow-x:auto;overflow-y:hidden;white-space:nowrap;height:200px">
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                </div>
    <a style="display:inline-block;position:absolute;right:0;top:0;margin-top:100px" onclick="next()" href="#">--></a>
 </div>


Это сообщение отредактировал(а) dma84 - 8.7.2011, 11:50
PM MAIL   Вверх
DeMONiZ
Дата 11.7.2011, 05:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет



Вот спасибо, работает спасибо за момощь!

Хотя с текстом блоки ведут себя непонятно....

Код

<style type="text/css">
  #s{border:1px blue solid}
  #s div{border:1px solid red; display:inline-block;width:33.3%;height:200px;}
  *html #s div{display:inline !important;zoom:1}
  *+html #s div{display:inline !important;zoom:1}
  *html a.left{left:-20px !important}
 </style>
 <div id="main" style="position:relative;white-space:nowrap;border:1px green solid;overflow:hidden;padding:0 20px">
  <a class="left" style="display:inline-block;position:absolute;left:0;top:0;margin-top:100px" onclick="prev()" href="#"><--</a>
                <div id="s" style="width:100%;display:inline-block;overflow-x:auto;overflow-y:hidden;white-space:nowrap;height:200px">
                    <div>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст ТекстТекст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                </div>
    <a style="display:inline-block;position:absolute;right:0;top:0;margin-top:100px" onclick="next()" href="#">--></a>
 </div>


Это сообщение отредактировал(а) DeMONiZ - 11.7.2011, 06:01
PM MAIL WWW   Вверх
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0601 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.