X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Резиновый горизонтальный слайдер
prospravka.ru
prospravka.ru
Topic Starter сообщение 7.7.2011, 7:22; Ответить: prospravka.ru
Сообщение #1


Здравствуйте форумчане, Сегодня столкнулся с небольшой проблемкой вот и решил попросить помощи у вас.

Есть необходимость сделать горизонтальный слайдер с тремя видимыми ячейками остальные видны при нажатии на стрлочки вправо влево.

js часть написана.

Вопрос вот в чем не могу сделать так слайдер был резиновым. В данном случае он 900 пикселей а надо чтоб он подстраивался под экран.
Реализация подставления нужной ширины через js не преветствуется.

Прилагаю код:
<a style="float:left;" onclick="prev()" href="#"><--</a>
<div id="s" style="margin-bottom:10px; border:1px solid red; width:900px; float:left; display:block; height:200px; overflow: hidden;">
<div style="width:1800px;">
<div style="border:1px solid red; float:left; width:298px; height:200px;">1</div>
<div style="border:1px solid red; float:left; width:298px; height:200px;">2</div>
<div style="border:1px solid red; float:left; width:298px; height:200px;">3</div>
<div style="border:1px solid red; float:left; width:298px; height:200px;">4</div>
<div style="border:1px solid red; float:left; width:298px; height:200px;">5</div>
<div style="border:1px solid red; float:left; width:298px; height:200px;">6</div>
</div>
</div>
<a style="float:left;" onclick="next()" href="#">--></a>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ValianT
ValianT
сообщение 7.7.2011, 20:17; Ответить: ValianT
Сообщение #2


ну и не будет он подстраивается,потому что на нём флоат есть.
а дивы в ссылку пихать это вообще смертный грех.
к тому же вы указываете оверфлоу,а для него размеры нужны.

по кр мере от флоата нужно точно избавиться.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 8.7.2011, 0:06; Ответить: Den1xxx
Сообщение #3


(ValianT @ 7.7.2011, 23:17) *
а дивы в ссылку пихать это вообще смертный грех.

И где это интересно увидели? В коде нет такого.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prospravka.ru
prospravka.ru
Topic Starter сообщение 8.7.2011, 7:13; Ответить: prospravka.ru
Сообщение #4


В ссылку блок ни кто не засовывает. А вот float тут совершенно не причем. Вы луше предложите свой код который будет удовлетворять выше сказанные требования если вам чем то так плох мой...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ValianT
ValianT
сообщение 8.7.2011, 12:34; Ответить: ValianT
Сообщение #5


Угу,закрытие ссылки я не досмотрел. Моя вина.

Но если уж такая пьянка,давай разбираться.
Ты хочешь чтобы
<div id="s" style="margin-bottom:10px; border:1px solid red; width:900px; float:left; display:block; height:200px; overflow: hidden;">
этот див растягивался на всю ширину экрана? Или какой смысл вкладывается в "подстраивался под экран"?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
enigmer
enigmer
сообщение 11.7.2011, 19:15; Ответить: enigmer
Сообщение #6


код html:
<body>
<div class="container">
  <div class="sidebar1">
    <!-- end .sidebar1 --></div>
  <div class="content">
    <!-- end .content --></div>
  <div class="sidebar2">
    <!-- end .sidebar2 --></div>
  <!-- end .container --></div>
</body>



код сss(таблица стилей):
.container {
    width: 80%;
    max-width: 1260px;
    min-width: 780px;
    background: #FFF;
    margin: 0 auto;
    overflow: hidden;
}
.sidebar1 {
    float: left;
    width: 30%;
    background: #93A5C4;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 45%;
    float: left;
}
.sidebar2 {
    float: left;
    width: 25%;
    background: #93A5C4;
    padding: 10px 0;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Kned
Kned
сообщение 28.5.2012, 9:53; Ответить: Kned
Сообщение #7


Не знаю как это реализовать. Есть готовое решение резинового слайдера http://www.jrubber.org/

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Достать слайдер с сайта
 3 tsa 1669 31.1.2020, 17:20
автор: gruz333
Открытая тема (нет новых ответов) Слайдер под меню
 0 Olya_Poy 4645 29.11.2017, 11:09
автор: -garmoni-
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПочему слайдер не работает в IE ?
 1 GTAlex 1398 2.11.2016, 11:53
автор: BLIK
Открытая тема (нет новых ответов) Написать слайдер на jquery
 0 fluxby 4116 1.10.2013, 10:56
автор: -fluxby-
Открытая тема (нет новых ответов) Слайдер с табами
 2 dididima 3128 27.8.2013, 10:30
автор: serg_ivanovich


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 24.4.2024, 2:25

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet