Резиновый горизонтальый слайдер

[prospravka.ru]

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

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

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>

[rookie]

А как насчет:

1)Убрать width совсем

или

2)Подставить width: X%

или

3)Задать ограничители min/max-width

?

[prospravka.ru]

Перед тем как дать ответ в тему, проверьте работает ли на данном примере то что вы сказали.

[rookie]

Интересно, как Вы предлагаете проверять без кода скрипта? Откуда я знаю, что у Вас делает - prev()? Какие стили он меняет? Какие размеры задает?

А если по существу, то... Вы знаете другие способы сделать что-либо резиновым кроме тех что я указал? Было бы очень интересно узнать о них.

Edited July 8, 2011 by rookie

[prospravka.ru]

Вам не скрипт проверять надо а html скрипт тут не причем а раз это слайдер то и так ясно что prev() и next() это стрелки которые отвечают за скрол. Нет других способов я не знаю, но вы не зная работает то что вы прдложили или нет все же пишите. Для начала попробуйте сами то что вы сказали. Я же прошу помочь мне переделать мой код или же предложить совй который будет отвечать моим требованиям.

[buddah]

prospravka.ru, каким макаром он должен подстраиваться под экран, если ты проставил везде фиксированную ширину?

rookie все правильно сказал

width:1800px - что это?

width:900px; - что это?

width:298px; - что это?

[rookie]

Вам не скрипт проверять надо а html

Не знаю почему, но мне кажется что нам проверять ничего не надо. Мы просто предлагаем Вам варианты решения и уже Вы сами их проверяете бо проблема у Вас, а не у нас и Вы гораздо лучше знаете какого результата в итоге хотите добиться.

И кстати, Вы мне так и не ответили - как можно добиться liquid width кроме тех способов которые я привел?

[prospravka.ru]

Вы предлогаете не работающие варинты решения для данного кода. То есть вы сидите и гадаете

Да согласен поставил фиксированную. Дак вот и предложите вариант решения как поставить процентную чтоб достичь моих целей

Ни кто ведь еще не предложил рабочий вариант решения, не так ли?

Допустим делаем так

<style type="text/css">
  #s{border:1px blue solid}
  #s div{border:1px solid red; display:inline-block; width:298px; 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>

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

[rookie]

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

Математику в школе учили? 100% на три разделить можете?

[prospravka.ru]

Не стоит хамить я думаю. Я у тебя помощи прошу с кодом, а ты мой код даже прочитать не можешь глазами, возьми сейчас и задай 33% блоку и посмотри что выйдет, а потом предлогай. Если было бы все так просто то и тему создавать не стал.

Сделал, своими силами. Переписал код по другому

[psywalker]

Не стоит хамить я думаю. Я у тебя помощи прошу с кодом, а ты мой код даже прочитать не можешь глазами, возьми сейчас и задай 33% блоку и посмотри что выйдет, а потом предлогай. Если было бы все так просто то и тему создавать не стал.

Сделал, своими силами. Переписал код по другому

Покажи плиз, как решил задачу.