дианитка
3.07.2013 - 11:01
Здравствуйте. Вот нужно сделать нестандартный слайдер как в приложении. Нестандартность в том, что сам слайдер резиновый, и картинки в нем обрезаються, при прокрутке за черный прямоугольник внизу можно просматривать все фотографии. Сначала я сделала ненумерованный список, установила для li display:inline, рассчитала программно высоту и ширину каждой картинки и задала их при помощи padding-bottom и padding-right. В firefoxe прошло, но в хроме нет. Пробовала ставить display:inline-block, но при этом отображается одна картинка, а все остальные переносяться на новую строку, т.е ведут себя как блочные. что можно сделать, чтобы они выстраивались все-таки в одну строку.
_____________
дианка[COLOR=purple]
andrey888
3.07.2013 - 12:26
Попробуйте еще поиграть с display (inline, inline-block, inline-table и т.д. ) если у родительского блока в котором все картинки ширина не auto - попробовать дать li свойство float , например float:left;
_____________
Прогноз на следующие 5 лет : Россия, Китай - две величайшие державы.
США в Ж*пе. Справедливость восторжествует. )
glock18
3.07.2013 - 13:54
дианитка
на скриншоте то, как есть или то, как должно быть?
Не совсем понятно, пробовали ли вы уже display: block; и float: left;
дианитка
3.07.2013 - 14:04
на скриншоте, как должно быть. если поставить display: block; и float: left; то следующая картинка, т.к. она не помещается по ширине, переносится на следующую строку
_____________
дианка[COLOR=purple]
glock18
3.07.2013 - 14:28
Цитата (дианитка @ 3.07.2013 - 10:04) |
на скриншоте, как должно быть. если поставить display: block; и float: left; то следующая картинка, т.к. она не помещается по ширине, переносится на следующую строку |
дк должна помещаться.
Должен быть див подложка с очень большой шириной (такой чтобы все картинки влезли, можно с запасом).
что-то в духе
<div class="image-wrapper">
<div class="image-slider">
<!-- сами картинки -->
</div>
</div>
у враппера overflow: hidden, и стандартные ваши размеры.
У слайдера большущая ширина (что-нибудь типа 9999px или даже больше)
соответственно, сдвигаете сам слайдер внутри враппера при прокрутке
andrey888
3.07.2013 - 22:22
Цитата |
Цитата | Цитата (дианитка @ 3.07.2013 - 10:04) на скриншоте, как должно быть. если поставить display: block; и float: left; то следующая картинка, т.к. она не помещается по ширине, переносится на следующую строку |
дк должна помещаться.
|
в этом и проблема.
Делайте по примеру который вам дали выше.
_____________
Прогноз на следующие 5 лет : Россия, Китай - две величайшие державы.
США в Ж*пе. Справедливость восторжествует. )
glock18
3.07.2013 - 22:48
Цитата (andrey888 @ 3.07.2013 - 18:22) |
Цитата | Цитата | Цитата (дианитка @ 3.07.2013 - 10:04) на скриншоте, как должно быть. если поставить display: block; и float: left; то следующая картинка, т.к. она не помещается по ширине, переносится на следующую строку |
дк должна помещаться.
|
в этом и проблема. Делайте по примеру который вам дали выше.
|
мне делать? )
andrey888
3.07.2013 - 23:00
glock18
Нет конечно . Автору ) ..
Но если ты так хочешь ...
_____________
Прогноз на следующие 5 лет : Россия, Китай - две величайшие державы.
США в Ж*пе. Справедливость восторжествует. )
glock18
3.07.2013 - 23:21
ну, вы меня процитировали просто
andrey888
3.07.2013 - 23:57
чтоб автор еще раз прочитал ) .. повторение - мать учения )
_____________
Прогноз на следующие 5 лет : Россия, Китай - две величайшие державы.
США в Ж*пе. Справедливость восторжествует. )
glock18
4.07.2013 - 00:53
Цитата (andrey888 @ 3.07.2013 - 19:57) |
чтоб автор еще раз прочитал ) .. повторение - мать учения ) |
![smile.gif](http://phpforum.su/html/emoticons/smile.gif)
да, один мой препод любил говорить "Повторение - мать заикания"
![smile.gif](http://phpforum.su/html/emoticons/smile.gif)
С этим не поспоришь, скажу я
дианитка
4.07.2013 - 14:59
я сделала через inline-block и абсолютное позиционирование. а див, в который эти картинки вложены, шириной 100% - он заканчивается, где начинается вертикальная прокрутка у браузера, в общем, он резиновый. но все-равно не пойму, почему, когда это были строковые, то позиционирование не понадобилось, картинки выстроились в строку. Ведь элементы inline-block должны вести себя по отношению к внешним элементам как строки.
_____________
дианка[COLOR=purple]
Быстрый ответ:
Powered by dgreen
Здесь расположена полная версия этой страницы.