Добрый день. Прошу помощи. Сломал голову как решить вопрос.
Есть два блока <div>
Нужно расположить один за другим вертикально.
Проблема в том, что в результате один накладывается на другой (из-за свойств первого <div> и JavaScript). Могу только задать отступ второго <div> через padding-top: Но никакой адаптивности в этом нет.
Подскажите пожалуйста как правильно поправить код. Пробовал разные сочетания, похожих проблем в сети не нашел. Одна надежда на вас. Заранее спасибо.
Код ниже.
тестирую я тут:
http://www.fotoview.ru/demo_index4.php
автор<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="viewport" content="width=device-width,initial-scale=0.5" />
<style type="text/css">
div#rotator {position: relative; margin-left: -40px; }
div#rotator ul li {
position: absolute;
font-style: italic;
width: 90%;
text-align: center;
right:0;
left:0;
margin:0 auto;
list-style: none;
}
div#rotator ul li.show {z-index:500;}
.test_test { padding-top: 600px;
}
</style>
<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript">
function theRotator() {
$('div#rotator ul li').css({opacity: 0.0});
$('div#rotator ul li:first').css({opacity: 1.0});
setInterval('rotate()',3000);
}
function rotate() {
// Берем первую картинку
var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};
$(document).ready(function() {
theRotator();
});
</script>
</head>
<body>
<div id="rotator">
<ul>
<li class="show"><img src="images/NY2016_1.jpg" width="100%" alt="Новый год 2016!" title="Новый год 2016!" border="0" /> </li>
<li><img src="images/400.jpg" width="100%" alt="Свадебная фотосессия весной" title="Свадебная фотосессия весной" border="0" /></li>
<li><img src="images/401.jpg" width="100%" alt="Эмоции на свадьбе" title="Эмоции на свадьбе" border="0" /></li>
</ul>
</div>
<div class="test_test">
sddddddddddddddddddddddddddddddddddddddddddddfv asdfsaafsdfsafasf
</div>
</body>
</html>
