• Страница 1 из 1
  • 1
Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Доделать слайдер с моштабированием
Доделать слайдер с моштабированием
EddEgg
Сообщений: 22
Репутация: 3

Сообщение # 1 | 05:49:42
Привет всем!!!

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

Горизонталь получилось сделать, вертикаль нет

Добавлено: сайт

CSS самого слайдера


Код
.slider {
float:right;
width:100%;
height:200px;
position:relative;
padding-bottom:26px;
background:url(/gfx/bottom_shadow.png) no-repeat bottom center;
}

.sliderContent {
float:right;
width:100%;
height:200px;
clear:both;
position:relative;
overflow:hidden;
}

.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(/gfx/prev_next.png);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
}

.prev {
background-position:0 0;
left:15px;
}

.prev:hover {
background-position:0 -44px;
}

.next {
right:15px;
background-position:-44px 0;
}

.next:hover {
background-position:-44px -44px;
}

.sliderContent .item {
position:absolute;
width:100%;
height:200px;
background:#fff;
}

.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}

.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(/gfx/bullets.png) no-repeat;
}

.sliderBullets .active {
background-position:0 -11px;
}

.sliderContent a {
outline:none;
}


CSS пропорционального маштабирования, взято тут


Код
<style type="text/css">
/* StartStyle */
#header{ height:auto;}
#headerTb{border-collapse:collapse;border-spacing:0;table-layout:fixed;background-color:#ffffff;height:121px;}
#headerTb img.topImg{width:100%!important;height:auto!important;-ms-interpolation-mode:bicubic;}
td.hdImg{vertical-align:top;}
/* EndStyle */
</style>


HTML


Код
<tr><img src="http://sampodai.ucoz.ru/gfx/logo55.jpg" alt="" />
<td height="100%">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
<tr><td class="hdImg" colspan="3" style="background:url('') left bottom no-repeat;padding-left:120px;"><span style="color:#6B6F5F;font:20pt bold Verdana,Tahoma;"><b><!-- <logo> --><!-- </logo> --></b></span>
     
     
   <script type="text/javascript">   
$('.slider3').mobilyslider(   
transition: 'fade',   
animationSpeed: 800,   
bullets: true,   
arrowsHide: false   
);   
</script>   

   <div class="slider slider2">
   <div class="sliderContent">
   <div class="item">
   <img class="topImg" src="http://sampodai.ucoz.ru/gfx/od1.jpg" alt="" />
   </div>
   <div class="item">
   <img class="topImg" src="http://sampodai.ucoz.ru/gfx/dom1.jpg" alt="" />
   </div>
   <div class="item">
   <img class="topImg" src="http://sampodai.ucoz.ru/gfx/pod1.jpg" alt="" />
   </div>
   </div>
   </div>
     
   </td></tr>


Помогите найти решение
Сообщение отредактировал EddEgg - Вторник, 21 Янв 2014, 05:51:34
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 2 | 10:47:44
EddEgg, Масштабировать слайдер если не масштабируется всё остальное не имеет смысла ... указываете высоту в - EM единицах может что то и получится под ваш замысел ...

Сообщение отредактировал Miss_Esq - Вторник, 21 Янв 2014, 10:49:55
EddEgg
Сообщений: 22
Репутация: 3

Сообщение # 3 | 16:09:40
Miss_Esq, На мой взгляд в данной ситуации имеет, т.к. если не масштабировать, на мониторах с более высоким разрешением он остается справа, а слева довольно больше голое место, вставим на то место какое нить изображение, то на относительно небольшом мониторе Слайдер наедет на то самое изображение. В данной, мне нравиться решение масштабирования, Удалось сделать по горизонтали и уже можно визуально увидеть что не плохое решение

горизонтальное меню в соответствии маштабируются, колонки тоже не ломаются.

Когда указываю жесткую высоту слайдера то все в порядке, ячейка раздвигается и ничего не ломается, если начинаешь указывать что то типа 100% то слайдер наезжает на нижнее меню, и в общем все плохо))))

Поковыряю EM посмотрю что можно придумать.

Добавлено (21 Янв 2014, 16:09:40)
---------------------------------------------
Начинает доходить почему не выходит. Если на пальцах, то на ширину ячейки есть "давление" и картинка меняется в соответствии, а слайдер просто подстраивается под ширину, не маштабируясь.... Нужно либо заставить масштабироваться слайдер либо саму ячейку ....

Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Доделать слайдер с моштабированием
  • Страница 1 из 1
  • 1
Поиск: