Сообщений в теме: 6

[badisoft]

Играюсь с каруселями (jcarouel, stepcarousel, etc) и напрочь не могу понять, как сделать так, чтобы карусель вписывалась в центральный блок не раздвигая левый-правый за пределы экрана. При неизменном разрешении экрана способ очевиден - задать жестко ширину контейнера и это работает. Но разрешение-то у всех разное! Уже неделю играюсь, но так и не понял, почему все центральные блоки растягиваются-сжимаются так, чтобы левые-правые поместились на экран, но стоит только вставить карусель - ширина центрального блока четко завязана на заданную ширину карусели и раздвигает правый столбец блоков за экран. Т.е. не могу понять, как сказать контейнеру, чтобы он был шириной именно как центральный блок, не шире и не уже.

Догадываюсь, что это какая-то очередная простейшесть, но вот найти не могу .

[micehide]

Код контейнера с каруселью в студию, или лучше просто повесь эту карусель у себя на тестовом сайте где-нибудь и дай ссылку...

[badisoft]

Код контейнера с каруселью в студию, или лучше просто повесь эту карусель у себя на тестовом сайте где-нибудь и дай ссылку...

Так они же все одинаковые, как близнецы-братья.
либо

<div class="общий_контейнер">
<div class=набор_элементов">
<div class=элемент_карусели">
  <a href=.......>..</a>
</div>
  ...
</div>
</div>

либо

<div class="общий_контейнер">
<div class=набор_элементов">
  <ul>
   <li>....</li>
   ....
  </ul>
</div>
</div>

Вот наружный <div class="общий_контейнер"> и не могу сделать привязанным к ширине центрального (т.е. нижнего или верхнего) блока. Пример - http://cpu.badisoft....ook-IQ-701.html - там заточено под 1280х1024. Но я несколько разных каруселей попробовал, все растягивают экран при вставке в центральный блок, если не задавать жестко with:XXXpx по нужной ширине для текущего разрешения. Наверное, можно этот параметр на лету менять JS-функцией при инциализации карусели, но остальные-то центральные блоки и так без проблем вписываются.

PS. Как увидеть суть проблемы: на любой другой странице сайта кроме подробного описания если уменьшать окошко браузера, то левый и правый столбцы блоков до определенного момента сдвигаются, уменьшая ширину центрального столбца и не образуя у браузера горизонтального скроллера. На странице с каруселью при этом же действии тут же появится скроллер, т.к. центральный столбец сжиматься не будет. Понятно, что ему жестко задана ширина, но если не задавать, то он и при развороте на весь экран правый столбец блоков выпихивает "за экран".

[R.Sergey]

Не совсем понял что ты там написал но скажу что с помощью ксс ты не добьешься чтобы карусель "вписывалась" поэтому нужно просто просчитывать ее ширину каждый раз при изменении ширины экрана, а точнее даже не экрана а браузера:

например

  $(window).bind("resize", function(){
$("#id").css("width", $(window).width());
  })

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

[badisoft]

с помощью ксс ты не добьешься чтобы карусель "вписывалась" поэтому нужно просто просчитывать ее ширину каждый раз при изменении ширины экрана

Хм... А с чем это связано? Остальные-то блоки (нижние и верхние) вполне сами масштабируются под ширину экрана. Может, с тем, что без участия JS-функций суммарная ширина карусели (все картинки в ряд) заведомо шире? Так ведь тоже нет, карусель на <ul>/<li> до инициализации располагается вертикально, картинки друг под другом. В общем, странно мне это, что CSS весьма не первой версии не позволяет задать контейнеру плавающую ширину в стиле "занимать то, что осталось от элементов фиксированной ширины". Хотя, как мне казалось, width:100% это как раз оно и есть.

PS. Глянул трикивебовскую карусель (которая на сайте выложена, мышой влево-вправо двигается) - там тоже ширина задается при инициализации JS-функцией. Нет счастья в жизни (:.

[badisoft]

например $(window).bind("resize", function(){ $("#id").css("width", $(window).width()); })

Я примерно так и сделал:

var over_car=470;
$('div.stepcarousel').width($(window).width()-over_car);
$(window).resize(function(){$('div.stepcarousel').width($(window).width()-over_car);});

Но все равно какой-то осадочек остался, что я сделал нечто, делаемое куда проще и правильнее.

[R.Sergey]

м... А с чем это связано? Остальные-то блоки (нижние и верхние) вполне сами масштабируются под ширину экрана. Может, с тем, что без участия JS-функций суммарная ширина карусели (все картинки в ряд) заведомо шире? Так ведь тоже нет, карусель на <ul>/<li>до инициализации располагается вертикально, картинки друг под другом. В общем, странно мне это, что CSS весьма не первой версии не позволяет задать контейнеру плавающую ширину в стиле "занимать то, что осталось от элементов фиксированной ширины". Хотя, как мне казалось, width:100% это как раз оно и есть.

Да все верно, сама карусель всегда гораздо шире и прячем мы ее с помощью overflow потому если ты задашь ширину 100% то она просто растянется на всю ширину а не будет подстраиваться. Поэтому ширину нужно обязательно фиксировать, а фиксированную на резиновом дизайне можно задать только на java, ну или на либо чем другом, что работает на стороне клиента.