|
|
Модератор форума: Yuri_G |
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Доделать слайдер с моштабированием |
Доделать слайдер с моштабированием |
Привет всем!!!
Не могу дособирать слайдер, что бы он изменялся в соответствии с разрешением экрана Горизонталь получилось сделать, вертикаль нет Добавлено: сайт 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
|
EddEgg, Масштабировать слайдер если не масштабируется всё остальное не имеет смысла ... указываете высоту в - EM единицах может что то и получится под ваш замысел ...
Сообщение отредактировал Miss_Esq - Вторник, 21 Янв 2014, 10:49:55
|
Miss_Esq, На мой взгляд в данной ситуации имеет, т.к. если не масштабировать, на мониторах с более высоким разрешением он остается справа, а слева довольно больше голое место, вставим на то место какое нить изображение, то на относительно небольшом мониторе Слайдер наедет на то самое изображение. В данной, мне нравиться решение масштабирования, Удалось сделать по горизонтали и уже можно визуально увидеть что не плохое решение
горизонтальное меню в соответствии маштабируются, колонки тоже не ломаются. Когда указываю жесткую высоту слайдера то все в порядке, ячейка раздвигается и ничего не ломается, если начинаешь указывать что то типа 100% то слайдер наезжает на нижнее меню, и в общем все плохо)))) Поковыряю EM посмотрю что можно придумать. Добавлено (21 Янв 2014, 16:09:40) |
| |||
| |||