Доброго времени суток!
Подскажите, как можно задать границы слайд шоу так, чтобы они не вылазили с блока боковой колонки?
Проблема в том что картинка(№1) вылазит за предел блока, а должна быть в рамке (№2) как показано на скрине ниже… http://savepic.ru/13747125.jpg
Ссылка на страницу: http://www.2amovers.com/ru/krupnye-proekty/
Код страницы:
<div class="block-3 no-mar sidebar">
<style>
#IUAfinance32 {width: 97%; position: relative; margin: 6px; {1}}
#IUAfinance32 * {margin: 0; padding: 0;}
#IUAfinance32 a, #IUAfinance32 a:hover {border: none; text-decoration: underline; color: inherit;}
#IUAfinance32 .IUAfinance_block {overflow: hidden; padding: 4px; font-family: Arial; font-size: 10px; background: #F6F6F6; border: 1px solid #00529c; color: #000000;}
#IUAfinance32 .IUAfinance_title {overflow: hidden; margin-top: -4px; font-size: 12px; font-weight: bold; height: 20px; line-height: 20px; color: #00529C;}
#IUAfinance32 .IUAfinance_title i {position: absolute; right: 4px; top: 2px; width: 36px; height: 14px; background: url(//i.i.ua/v2/logo/logo_small_14_black.png) no-repeat 0 0 transparent; opacity: .3;}
#IUAfinance32 .IUAfinance_content, #IUAfinance32 .IUAfinance_content:hover {display: block; background: #FFFFFF; padding: 4px; margin-bottom: 4px; text-decoration: none; color: inherit;}
#IUAfinance32 .IUAfinance_head_title {font-size: 12px; font-weight: bold;}
#IUAfinance32 .IUAfinance_item,
#IUAfinance32 .IUAfinance_head {padding: 4px 0;}
#IUAfinance32 .IUAfinance_item:last-child {padding-bottom: 0;}
#IUAfinance32 .IUAfinance_item {border-top: 1px dotted #DDD; font-size: 18px; font-family: Trebuchet MS;}
#IUAfinance32 .IUAfinance_item_title,
#IUAfinance32 .IUAfinance_item_data {display: inline-block; vertical-align: top; width: 42%; text-align: right;}
#IUAfinance32 .IUAfinance_item_title:first-child,
#IUAfinance32 .IUAfinance_item_data:first-child {width: 16%; text-align: left;}
#IUAfinance32 .IUAfinance-increase:before {content: "\25B2"; color: #40983c; font-size: 11px;}
#IUAfinance32 .IUAfinance-decrease:before {content: "\25BC"; color: #ed482e; font-size: 11px;}
</style>
<div id="IUAfinance32">
<div class="IUAfinance_block" id="IUAfinanceBlock">
<h1 class="IUAfinance_title" id="IUAfinanceTitle"></h1>
<a href="//finance.i.ua/informers/" target="_blank" class="IUAfinance_content" id="IUAfinanceContent"></a>
<a href="" id="IUAfinanceLink">Курсы доллара, евро и рубля по банкам</a>
</div>
</div>
<script type="text/javascript">
var $container = document.getElementById("IUAfinance32");
$container.style.width = "240";
$container.querySelector(".IUAfinance_block").style.backgroundColor = "rgb(255,109,36)";
$container.querySelector(".IUAfinance_block").style.borderColor = "rgb(255, 255, 255)";
$container.querySelector(".IUAfinance_block").style.color = "rgb(255, 255, 255)";
$container.querySelector(".IUAfinance_content").style.backgroundColor = "rgb(204, 204, 204)";
$container.querySelector(".IUAfinance_title").style.color = "rgb(255, 255, 255)";
$container.querySelector("#IUAfinanceLink").style.color = "rgb(255, 255, 255)";</script>
<script type="text/javascript">
if (typeof(iFinance) == "undefined") {
if (typeof(iFinanceData) == "undefined") {
document.write('<scr' + 'ipt src="//i.i.ua/js/i/finance_informer.js?1" type="text/javascript" charset = "windows-1251"></scr' + 'ipt>');
iFinanceData = [];
}
iFinanceData.push({b:15, c:[840,978,643], enc:2, lang:0, p:32, ver2: true});
} else {
window['oiFinance32'] = new iFinance(2);
window['oiFinance32'].gogo({b:15, c:[840,978,643], enc:2, lang:0, p:32});
}
</script>
<div>
<style type="text/css">
{width: 97%; position: relative; margin: 6px; {1}}
{margin: 0; padding: 0;}
1:hover {border: none; text-decoration: underline; color: inherit;}
.1_block {overflow: hidden; padding: 4px; font-family: Arial; font-size: 10px; background: #F6F6F6; border: 1px solid #00529c; color: #000000;}
.1_title {overflow: hidden; margin-top: -4px; font-size: 12px; font-weight: bold; height: 20px; line-height: 20px; color: #00529C;}
</style>
<div id="1">
<div class="1_block" id="1Block">
</div>
</div>
<script type="text/javascript">
var total_pics_num = 9; // колличество изображений
var interval = 12000; // задержка между изображениями
var time_out = 2; // задержка смены изображений
var i = 0;
var timeout;
var opacity = 100;
function fade_to_next() {
opacity--;
var k = i + 1;
var image_now = 'image_' + i;
if (i == total_pics_num) k = 1;
var image_next = 'image_' + k;
document.getElementById(image_now).style.opacity = opacity/100;
document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')';
document.getElementById(image_next).style.opacity = (100-opacity)/100;
document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')';
timeout = setTimeout("fade_to_next()",time_out);
if (opacity==1) {
opacity = 100;
clearTimeout(timeout);
}
}
setInterval (
function() {
i++;
if (i > total_pics_num) i=1;
fade_to_next();
}, interval
);
</script>
<img src='http://2amovers.com/wp-content/gallery/officenew/1.jpg' id="image_1" style="position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" />
<img src='http://2amovers.com/wp-content/gallery/officenew/2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" />
<img src='http://2amovers.com/wp-content/gallery/officenew/3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" />
<img src='http://2amovers.com/wp-content/gallery/officenew/4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" />
<img src='http://2amovers.com/wp-content/gallery/officenew/5.jpg' id="image_5" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" />
<img src='http://2amovers.com/wp-content/gallery/officenew/6.jpg' id="image_6" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" />
<img src='http://2amovers.com/wp-content/gallery/officenew/7.jpg' id="image_7" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" />
<img src='http://2amovers.com/wp-content/gallery/officenew/8.jpg' id="image_8" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" />
<img src='http://2amovers.com/wp-content/gallery/officenew/9.jpg' id="image_9" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" />
<!--[if gte IE 5]><script type="text/javascript"> // запрет правой кнопки
createPopup().show( 0, 0, 0, 0, 0 );
</script><![endif]-->
<body oncontextmenu="return false;">
</div>
</div>
Заранее спасибо!
