Очередной дурацкий вопрос - ширина карусели.
#1
Отправлено 07 December 2012 - 08:06 PM
Догадываюсь, что это какая-то очередная простейшесть, но вот найти не могу .
#2
Отправлено 07 December 2012 - 11:44 PM
#3
Отправлено 08 December 2012 - 01:32 AM
Так они же все одинаковые, как близнецы-братья.Код контейнера с каруселью в студию, или лучше просто повесь эту карусель у себя на тестовом сайте где-нибудь и дай ссылку...
либо
<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. Как увидеть суть проблемы: на любой другой странице сайта кроме подробного описания если уменьшать окошко браузера, то левый и правый столбцы блоков до определенного момента сдвигаются, уменьшая ширину центрального столбца и не образуя у браузера горизонтального скроллера. На странице с каруселью при этом же действии тут же появится скроллер, т.к. центральный столбец сжиматься не будет. Понятно, что ему жестко задана ширина, но если не задавать, то он и при развороте на весь экран правый столбец блоков выпихивает "за экран".
#4
Отправлено 08 December 2012 - 02:24 AM
например
$(window).bind("resize", function(){ $("#id").css("width", $(window).width()); })
Ну или как я делаю обычно не задавать сразу нужному контейнеру ширину а присвоить значение переменной, а потом эту переменную подставлять каждый раз когда нужно участие ширины экрана.
#5
Отправлено 08 December 2012 - 02:34 AM
Хм... А с чем это связано? Остальные-то блоки (нижние и верхние) вполне сами масштабируются под ширину экрана. Может, с тем, что без участия JS-функций суммарная ширина карусели (все картинки в ряд) заведомо шире? Так ведь тоже нет, карусель на <ul>/<li> до инициализации располагается вертикально, картинки друг под другом. В общем, странно мне это, что CSS весьма не первой версии не позволяет задать контейнеру плавающую ширину в стиле "занимать то, что осталось от элементов фиксированной ширины". Хотя, как мне казалось, width:100% это как раз оно и есть.с помощью ксс ты не добьешься чтобы карусель "вписывалась" поэтому нужно просто просчитывать ее ширину каждый раз при изменении ширины экрана
PS. Глянул трикивебовскую карусель (которая на сайте выложена, мышой влево-вправо двигается) - там тоже ширина задается при инициализации JS-функцией. Нет счастья в жизни (:.
#6
Отправлено 08 December 2012 - 03:39 AM
Я примерно так и сделал:например $(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);});
Но все равно какой-то осадочек остался, что я сделал нечто, делаемое куда проще и правильнее.
#7
Отправлено 08 December 2012 - 02:30 PM
м... А с чем это связано? Остальные-то блоки (нижние и верхние) вполне сами масштабируются под ширину экрана. Может, с тем, что без участия JS-функций суммарная ширина карусели (все картинки в ряд) заведомо шире? Так ведь тоже нет, карусель на <ul>/<li>до инициализации располагается вертикально, картинки друг под другом. В общем, странно мне это, что CSS весьма не первой версии не позволяет задать контейнеру плавающую ширину в стиле "занимать то, что осталось от элементов фиксированной ширины". Хотя, как мне казалось, width:100% это как раз оно и есть.
Да все верно, сама карусель всегда гораздо шире и прячем мы ее с помощью overflow потому если ты задашь ширину 100% то она просто растянется на всю ширину а не будет подстраиваться. Поэтому ширину нужно обязательно фиксировать, а фиксированную на резиновом дизайне можно задать только на java, ну или на либо чем другом, что работает на стороне клиента.